5分钟搞定Monaco Editor上下文菜单：从事件监听到底层定制
项目地址: https://gitcode.com/gh_mirrors/mo/monaco-editor Monaco Editor作为浏览器端的代码编辑器解决方案，其上下文菜单（Context Menu）是提升用户体验的关键组件。本文将系统讲解如何捕获上下文菜单显示事件、自定义菜单项行为，并通过实战案例展示完整实现流程，帮助开发者快速掌握这一高频需求功能。
上下文菜单基础架构
Monaco Editor的上下文菜单系统基于动作（Action）机制实现，所有菜单项本质上都是可执行的编辑器动作。通过查阅CHANGELOG.md可知，项目在迭代过程中持续优化菜单体验，包括IE11兼容性修复(#1191)、剪贴板API集成等关键改进。
上下文菜单的核心实现位于编辑器主模块，通过src/editor/editor.main.ts初始化工作线程环境，而菜单渲染逻辑则由Monaco Editor Core提供的基础组件处理。工作线程初始化流程如下：
// 工作线程初始化逻辑（src/editor/editor.worker.ts）
self.onmessage = () => {
if (!isWorkerInitialized()) {
worker.start(() => {
return {};
});
} else {
// 已初始化状态处理
}
};
事件监听机制
要捕获上下文菜单显示事件，需通过editor.onContextMenu方法注册监听器。该事件在用户右键点击编辑器区域时触发，提供菜单显示前的拦截点：
const editor = monaco.editor.create(document.getElementById('container'), {
value: '// 示例代码',
language: 'javascript'
});
editor.onContextMenu((e) => {
console.log('上下文菜单即将显示', e);
// e包含鼠标位置、目标元素等关键信息
});
事件对象包含以下核心属性：
position：菜单显示坐标（{x: number, y: number}）target：触发菜单的DOM元素menuItems：默认菜单项数组（可修改）
自定义菜单项实现
添加新菜单项
通过editor.addAction方法可向上下文菜单添加自定义动作，需指定contextMenuGroupId将动作归类到菜单中：
editor.addAction({
id: 'custom-format',
label: '自定义格式化',
contextMenuGroupId: 'navigation', // 归属到导航分组
run: (ed) => {
const text = ed.getValue();
// 实现自定义格式化逻辑
ed.setValue(formatCode(text));
return null;
}
});
修改默认菜单项
要隐藏或修改现有菜单项，可通过editor.getAction获取目标动作后调整其属性：
const copyAction = editor.getAction('editor.action.clipboardCopyAction');
if (copyAction) {
copyAction.label = '复制代码（自定义）'; // 修改显示文本
// copyAction.enabled = false; // 禁用菜单项
}
高级定制技巧
动态菜单内容
根据当前编辑器状态动态生成菜单项，例如在选中代码时显示"注释所选内容"：
editor.onContextMenu((e) => {
const selection = editor.getSelection();
if (selection && !selection.isEmpty()) {
e.menuItems.push({
id: 'comment-selection',
label: '注释所选内容',
run: () => {
// 实现注释逻辑
}
});
}
});
菜单样式定制
通过CSS覆盖默认样式调整菜单外观，关键选择器包括：
/* 上下文菜单容器 */
.monaco-menu-container {
border-radius: 4px !important;
}
/* 菜单项 */
.monaco-menu .action-item {
padding: 6px 12px !important;
}
常见问题解决方案
菜单项不显示
检查以下可能原因：
- 未正确设置
contextMenuGroupId属性 - 动作被标记为禁用（
enabled: false） - 存在同名动作ID冲突
参考CHANGELOG.md中记录的#1357问题修复方案，确保在添加动作时使用唯一ID。
事件监听器失效
确认监听器注册时机，需在编辑器实例创建后执行：
// 错误示例：在编辑器创建前注册
editor.onContextMenu(() => {});
const editor = monaco.editor.create(...);
// 正确示例
const editor = monaco.editor.create(...);
editor.onContextMenu(() => {});
完整实现案例
以下是一个综合示例，实现"格式化JSON"上下文菜单项，仅在编辑JSON文件且选中文本时显示：
// 初始化编辑器
const editor = monaco.editor.create(document.getElementById('container'), {
value: '{\n "name": "monaco-editor"\n}',
language: 'json'
});
// 注册自定义动作
editor.addAction({
id: 'format-json',
label: '格式化JSON',
contextMenuGroupId: 'format',
// 控制菜单项可见性
showInContextMenu: true,
// 动态启用状态
isEnabled: () => {
return editor.getModel().getLanguageId() === 'json';
},
run: () => {
const value = editor.getValue();
try {
const formatted = JSON.stringify(JSON.parse(value), null, 2);
editor.setValue(formatted);
} catch (e) {
monaco.window.showErrorMessage('JSON格式错误');
}
}
});
// 监听菜单显示事件
editor.onContextMenu((e) => {
console.log('菜单显示位置:', e.position);
// 可在此处动态修改e.menuItems
});
通过这种实现方式，自定义菜单项会智能适配编辑内容类型，提供精准的上下文功能。
深入学习资源
- 官方API文档：monaco-editor-core
- 动作系统源码：Monaco Editor Core中的
Action类定义 - 高级案例：test/manual/typescript/目录下的上下文菜单测试用例
掌握上下文菜单定制后，可进一步探索Monaco Editor的命令系统、键绑定配置等高级特性，构建更符合业务需求的编辑器体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
