React项目中配置Monaco Editor带可点击操作的悬浮工具箱

核心问题分析 #

你尝试用ReactDOMServer把组件渲染成字符串的思路走不通，因为Monaco的悬浮提示（Hover）里的HTML是静态渲染的，不会绑定React的事件系统，按钮自然没法触发函数。得换用原生HTML+事件委托的方式来实现可点击操作。

具体实现步骤 #

1. 编写带可点击元素的悬浮提示HTML

在provideHover里直接返回原生HTML内容，给可点击元素加唯一标识（比如data-action属性），用来区分不同操作：

const hoverProvider = monaco.languages.registerHoverProvider(mylang, {
  provideHover: (model, position) => {
    const word = model.getWordAtPosition(position);
    if (!word) return null;
    
    return {
      range: new monaco.Range(
        position.lineNumber,
        word.startColumn,
        position.lineNumber,
        word.endColumn
      ),
      contents: [
        { 
          supportHtml: true, 
          value: `
            <div>
              <p>当前选中单词：${word.word}</p>
              <button class="monaco-hover-btn" data-action="replaceWord" data-word="${word.word}">替换为指定内容</button>
              <button class="monaco-hover-btn" data-action="queryInfo" data-word="${word.word}" style="margin-left:8px;">查询单词信息</button>
            </div>
          ` 
        },
      ],
    };
  },
});

2. 通过事件委托处理点击事件

在Monaco编辑器的容器上绑定点击事件，通过事件冒泡捕获悬浮提示里的按钮点击，根据data-action执行对应函数：

import { useEffect, useRef } from 'react';

function MonacoEditorWrapper() {
  const editorContainerRef = useRef(null);

  useEffect(() => {
    const handleHoverBtnClick = (e) => {
      // 找到点击的悬浮按钮
      const targetBtn = e.target.closest('.monaco-hover-btn');
      if (!targetBtn) return;

      const action = targetBtn.dataset.action;
      const targetWord = targetBtn.dataset.word;

      // 根据不同action执行逻辑
      switch(action) {
        case 'replaceWord':
          // 示例：替换编辑器中选中的单词
          const editor = monaco.editor.getModels()[0].getEditor();
          editor.executeEdits('', [
            {
              range: editor.getSelection(),
              text: '替换后的内容'
            }
          ]);
          break;
        case 'queryInfo':
          // 示例：执行查询逻辑
          console.log(`开始查询单词：${targetWord}`);
          // 这里可以调用接口、弹出弹窗等业务逻辑
          break;
      }
    };

    const container = editorContainerRef.current;
    container.addEventListener('click', handleHoverBtnClick);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      container.removeEventListener('click', handleHoverBtnClick);
    };
  }, []);

  return <div ref={editorContainerRef}>{/* 这里渲染Monaco Editor实例 */}</div>;
}

3. 适配Monaco样式（可选）

给按钮加样式，和VS Code的风格统一：

.monaco-hover-btn {
  background: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}

.monaco-hover-btn:hover {
  background: var(--vscode-button-hoverBackground);
}

关键注意事项 #

• 不要尝试在悬浮提示里渲染React组件：Monaco的悬浮DOM是独立的，和React的虚拟DOM体系不兼容，事件无法绑定。
• 避免内联onclick：Monaco可能会过滤内联事件，事件委托是最可靠的方式。
• 清理事件监听：组件卸载时一定要移除容器上的点击监听，防止内存泄漏。

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