如何为Monaco编辑器自定义cmd/ctrl+p快捷键触发命令面板

优先方案：利用Monaco内置快捷键配置 #

Monaco Editor本身提供了完善的快捷键注册机制，直接在编辑器配置中绑定比自定义键盘监听器更可靠，还能自动处理跨系统差异（Cmd/Ctrl）和焦点判断：

基础初始化场景

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: '// 你的代码内容',
  language: 'javascript',
  // 其他编辑器配置
  keybindings: [
    {
      key: 'Ctrl+P',
      mac: 'Cmd+P',
      command: 'editor.action.showCommands',
      when: 'editorTextFocus' // 仅当编辑器获得焦点时触发
    }
  ]
});

React + @monaco-editor/react 场景

import { Editor } from '@monaco-editor/react';

export default function JsEditor() {
  return (
    <Editor
      language="javascript"
      options={{
        keybindings: [
          {
            key: 'Ctrl+P',
            mac: 'Cmd+P',
            command: 'editor.action.showCommands',
            when: 'editorTextFocus'
          }
        ]
      }}
    />
  );
}

为什么之前的方案失效？ #

1. 全局键盘监听冲突：Monaco Editor会拦截编辑器区域的键盘事件，自定义全局监听器可能无法触发，或被Monaco的默认快捷键覆盖（默认Ctrl+P是快速打开文件editor.action.quickOpen）。
2. 时机问题：如果在编辑器未完全初始化时调用getAction，可能无法获取到目标动作。
3. 未阻止默认行为：即使监听到事件，浏览器或Monaco的默认行为（如打印、快速打开）会抢先执行，导致你的代码逻辑不生效。

备选：自定义键盘监听器（不推荐） #

如果必须用自定义监听器，需要绑定到编辑器DOM节点并阻止默认行为：

const monacoRef = useRef(null);

// 编辑器初始化完成后绑定监听
useEffect(() => {
  if (!monacoRef.current?.editor) return;
  
  const editorDom = monacoRef.current.editor.getDomNode();
  const handleKeydown = (e) => {
    const isModifierPressed = e.metaKey || e.ctrlKey;
    if (isModifierPressed && e.key.toLowerCase() === 'p') {
      e.preventDefault(); // 阻止默认行为
      e.stopPropagation(); // 阻止事件冒泡
      const action = monacoRef.current.editor.getAction('editor.action.showCommands');
      action?.run();
    }
  };

  editorDom.addEventListener('keydown', handleKeydown);
  return () => editorDom.removeEventListener('keydown', handleKeydown);
}, []);

内容的提问来源于stack exchange，提问作者DecPK