React中Monaco Editor的onChange处理及Ctrl+S快捷键实现问题

不用依赖onChange事件，Monaco Editor本身提供了内置的快捷键命令注册机制，这比全局监听键盘事件更可靠，还能避免和编辑器自身的快捷键冲突。

核心实现步骤 #

1. 获取Monaco Editor实例
2. 使用addCommand注册Ctrl+S（兼容Mac Cmd+S）快捷键
3. 在命令回调中获取编辑器内容并存入应用上下文，同时阻止浏览器默认的保存行为

基础代码示例 #

// 假设editor是已初始化的Monaco Editor实例
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
  // 临时监听一次keydown事件，彻底阻止浏览器默认保存行为
  document.addEventListener('keydown', function preventDefaultSave(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
      e.preventDefault();
      document.removeEventListener('keydown', preventDefaultSave);
    }
  }, { once: true });

  // 获取编辑器当前完整内容
  const editorContent = editor.getValue();
  
  // 替换成你的应用上下文存储逻辑
  // 比如：window.appContext.editorContent = editorContent;
  // 或者框架中的状态管理：store.dispatch({ type: 'UPDATE_EDITOR_CONTENT', payload: editorContent });
  console.log('已保存编辑器内容:', editorContent);
});

React环境下的示例（带清理逻辑） #

如果是在React项目中使用，需要在组件卸载时移除注册的命令，避免内存泄漏：

import { useEffect, useRef } from 'react';
import * as monaco from 'monaco-editor';

export default function CodeEditor() {
  const editorContainerRef = useRef(null);
  const editorRef = useRef(null);
  const commandIdRef = useRef(null);

  useEffect(() => {
    // 初始化Monaco Editor
    if (editorContainerRef.current && !editorRef.current) {
      editorRef.current = monaco.editor.create(editorContainerRef.current, {
        value: '',
        language: 'javascript',
        theme: 'vs-dark'
      });

      // 注册Ctrl+S命令
      commandIdRef.current = editorRef.current.addCommand(
        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
        () => {
          const preventDefault = (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
              e.preventDefault();
              document.removeEventListener('keydown', preventDefault);
            }
          };
          document.addEventListener('keydown', preventDefault, { once: true });

          const content = editorRef.current.getValue();
          // 存入应用上下文，比如React Context
          // const { saveContent } = useAppContext();
          // saveContent(content);
          console.log('保存内容:', content);
        }
      );
    }

    // 组件卸载时清理
    return () => {
      if (editorRef.current) {
        if (commandIdRef.current) {
          editorRef.current.removeCommand(commandIdRef.current);
        }
        editorRef.current.dispose();
        editorRef.current = null;
      }
    };
  }, []);

  return <div ref={editorContainerRef} style={{ width: '100%', height: 600 }} />;
}

关键注意点 #

• 优先用Monaco内置命令：不要用全局keydown监听，Monaco的命令系统会处理快捷键优先级，避免和编辑器自身的Ctrl+Z、Ctrl+X等快捷键冲突
• 直接获取内容更可靠：用editor.getValue()获取内容，比依赖onChange的缓存更准确，因为onChange在批量编辑或撤销操作时可能有延迟
• 阻止默认行为要彻底：临时绑定一次keydown事件并立即移除，确保浏览器不会触发默认的页面保存弹窗

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