umbraco-monaco-markdown-editor-action by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-monaco-markdown-editor-actionMonaco Markdown 编辑器操作为 Umbraco 中的 Markdown 编辑器添加了自定义工具栏按钮和键盘快捷键。它们允许您通过自定义功能(如插入链接、图像或自定义 Markdown 语法)来扩展编辑体验。操作会显示在编辑器工具栏中,并可以响应键盘快捷键。
在实现之前,请始终获取最新的文档:
模态框 : 当需要从操作中打开模态对话框时
umbraco-modals本地化 : 当需要提供本地化标签时
umbraco-localization广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
export const manifests: Array<UmbExtensionManifest> = [
{
type: 'monacoMarkdownEditorAction',
alias: 'My.MonacoMarkdownEditorAction.Custom',
name: 'Custom Monaco Markdown Editor Action',
api: () => import('./my-markdown-action.js'),
meta: {
label: 'Insert Custom',
icon: 'icon-favorite',
},
},
];
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
export class MyMarkdownAction extends UmbControllerBase {
constructor(host: UmbControllerHost) {
super(host);
}
getUnique() {
return 'My.MonacoMarkdownEditorAction.Custom';
}
getLabel() {
return 'Insert Custom';
}
getKeybindings() {
// Ctrl/Cmd + Shift + C
return [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC];
}
async execute({ editor, overlaySize }: { editor: any; overlaySize: UUIModalSidebarSize }) {
if (!editor) throw new Error('Editor not found');
const selection = editor.getSelections()[0];
if (!selection) return;
const selectedValue = editor.getValueInRange(selection);
// 插入自定义 Markdown
editor.monacoEditor?.executeEdits('', [
{ range: selection, text: `**${selectedValue || 'custom'}**` },
]);
editor.monacoEditor?.focus();
}
}
export { MyMarkdownAction as api };
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
export class MyModalMarkdownAction extends UmbControllerBase {
getUnique() {
return 'My.MonacoMarkdownEditorAction.Modal';
}
getLabel() {
return 'Insert with Modal';
}
getKeybindings() {
return [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM];
}
async execute({ editor, overlaySize }) {
const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
if (!modalManager) throw new Error('Modal manager not found');
const selection = editor?.getSelections()[0];
if (!selection) return;
// 打开一个模态框并使用其结果
const modalContext = modalManager.open(this, MY_CUSTOM_MODAL, {
modal: { size: overlaySize },
});
modalContext?.onSubmit().then((value) => {
if (!value) return;
editor.monacoEditor?.executeEdits('', [
{ range: selection, text: value.text },
]);
});
}
}
export { MyModalMarkdownAction as api };
interface ManifestMonacoMarkdownEditorAction extends ManifestApi<any> {
type: 'monacoMarkdownEditorAction';
meta?: MetaMonacoMarkdownEditorAction;
}
interface MetaMonacoMarkdownEditorAction {
icon?: string | null;
label?: string | null; // 可以使用本地化键,例如 '#buttons_linkInsert'
}
// 单键
monaco.KeyCode.Enter
// Ctrl/Cmd 组合键
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK // Ctrl+K 或 Cmd+K
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC // Ctrl+Shift+C
monaco.KeyMod.Alt | monaco.KeyCode.KeyI // Alt+I
就是这样!请始终获取最新的文档,保持示例简洁,并生成完整可用的代码。
每周安装数
74
代码仓库
GitHub 星标数
17
首次出现
2026年2月4日
安全审计
安装于
github-copilot52
cursor22
opencode21
codex21
gemini-cli18
amp18
Monaco Markdown Editor Actions add custom toolbar buttons and keyboard shortcuts to the Markdown editor in Umbraco. They allow you to extend the editing experience with custom functionality like inserting links, images, or custom markdown syntax. Actions appear in the editor toolbar and can respond to keyboard shortcuts.
Always fetch the latest docs before implementing:
Modals : When opening modal dialogs from actions
umbraco-modalsLocalization : When providing localized labels
umbraco-localizationexport const manifests: Array<UmbExtensionManifest> = [
{
type: 'monacoMarkdownEditorAction',
alias: 'My.MonacoMarkdownEditorAction.Custom',
name: 'Custom Monaco Markdown Editor Action',
api: () => import('./my-markdown-action.js'),
meta: {
label: 'Insert Custom',
icon: 'icon-favorite',
},
},
];
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
export class MyMarkdownAction extends UmbControllerBase {
constructor(host: UmbControllerHost) {
super(host);
}
getUnique() {
return 'My.MonacoMarkdownEditorAction.Custom';
}
getLabel() {
return 'Insert Custom';
}
getKeybindings() {
// Ctrl/Cmd + Shift + C
return [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC];
}
async execute({ editor, overlaySize }: { editor: any; overlaySize: UUIModalSidebarSize }) {
if (!editor) throw new Error('Editor not found');
const selection = editor.getSelections()[0];
if (!selection) return;
const selectedValue = editor.getValueInRange(selection);
// Insert custom markdown
editor.monacoEditor?.executeEdits('', [
{ range: selection, text: `**${selectedValue || 'custom'}**` },
]);
editor.monacoEditor?.focus();
}
}
export { MyMarkdownAction as api };
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
export class MyModalMarkdownAction extends UmbControllerBase {
getUnique() {
return 'My.MonacoMarkdownEditorAction.Modal';
}
getLabel() {
return 'Insert with Modal';
}
getKeybindings() {
return [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM];
}
async execute({ editor, overlaySize }) {
const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
if (!modalManager) throw new Error('Modal manager not found');
const selection = editor?.getSelections()[0];
if (!selection) return;
// Open a modal and use the result
const modalContext = modalManager.open(this, MY_CUSTOM_MODAL, {
modal: { size: overlaySize },
});
modalContext?.onSubmit().then((value) => {
if (!value) return;
editor.monacoEditor?.executeEdits('', [
{ range: selection, text: value.text },
]);
});
}
}
export { MyModalMarkdownAction as api };
interface ManifestMonacoMarkdownEditorAction extends ManifestApi<any> {
type: 'monacoMarkdownEditorAction';
meta?: MetaMonacoMarkdownEditorAction;
}
interface MetaMonacoMarkdownEditorAction {
icon?: string | null;
label?: string | null; // Can use localization key like '#buttons_linkInsert'
}
// Single key
monaco.KeyCode.Enter
// Ctrl/Cmd combinations
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK // Ctrl+K or Cmd+K
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyC // Ctrl+Shift+C
monaco.KeyMod.Alt | monaco.KeyCode.KeyI // Alt+I
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
74
Repository
GitHub Stars
17
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
github-copilot52
cursor22
opencode21
codex21
gemini-cli18
amp18
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装