能否向TinyMCE编辑器插入React组件？自定义工具栏实现咨询

完全可以实现这个需求，核心思路是通过TinyMCE的自定义工具栏API注册按钮，再将React组件转换为编辑器可识别的内容（静态HTML或可交互的 hydrated 组件）。以下是具体步骤：

1. 注册自定义工具栏按钮 #

首先在TinyMCE的初始化配置中，把自定义按钮加入工具栏，并通过setup函数定义按钮的点击行为：

tinymce.init({
  selector: '#your-editor-id',
  toolbar: 'insertCustomReactComponent',
  setup: (editor) => {
    // 注册自定义按钮
    editor.ui.registry.addButton('insertCustomReactComponent', {
      text: '插入React组件',
      icon: 'component', // 可选，使用TinyMCE内置图标或自定义图标
      onAction: () => {
        // 点击按钮后的插入逻辑写在这里
      }
    });
  }
});

2. 渲染React组件并插入编辑器 #

根据组件是否需要交互，分两种场景处理：

场景一：插入静态HTML（无交互需求） #

如果组件仅需展示，不需要交互，可以直接将React组件渲染为HTML字符串，插入到编辑器光标位置：

import React from 'react';
import { createRoot } from 'react-dom/client';

// 自定义React组件
const MyStaticComponent = () => (
  <div class="static-react-component">
    <h3>这是插入的静态React组件</h3>
    <p>仅用于展示的内容</p>
  </div>
);

tinymce.init({
  selector: '#your-editor-id',
  toolbar: 'insertCustomReactComponent',
  // 允许自定义元素和属性，避免被TinyMCE过滤
  valid_elements: '*[*]',
  setup: (editor) => {
    editor.ui.registry.addButton('insertCustomReactComponent', {
      text: '插入静态组件',
      onAction: () => {
        // 创建临时容器渲染组件
        const tempContainer = document.createElement('div');
        const root = createRoot(tempContainer);
        root.render(<MyStaticComponent />);
        
        // 将渲染后的HTML插入编辑器当前光标处
        editor.insertContent(tempContainer.innerHTML);
        
        // 清理临时资源
        root.unmount();
      }
    });
  }
});

场景二：插入可交互的React组件 #

如果需要组件保持交互能力，仅插入HTML是不够的，需要在编辑器内容加载完成后，对组件元素进行React hydrate：

import React from 'react';
import { hydrateRoot } from 'react-dom/client';

const MyInteractiveComponent = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div class="interactive-component">
      <p>点击次数: {count}</p>
      <button onClick={() => setCount(count + 1)}>点击计数</button>
    </div>
  );
};

tinymce.init({
  selector: '#your-editor-id',
  toolbar: 'insertCustomReactComponent',
  valid_elements: '*[*]',
  setup: (editor) => {
    editor.ui.registry.addButton('insertCustomReactComponent', {
      text: '插入交互组件',
      onAction: () => {
        const tempContainer = document.createElement('div');
        // 先渲染组件拿到HTML
        const root = createRoot(tempContainer);
        root.render(<MyInteractiveComponent />);
        editor.insertContent(tempContainer.innerHTML);
        root.unmount();
        
        // 插入后立即hydrate当前组件
        hydrateComponents(editor);
      }
    });

    // 定义hydrate函数，恢复组件交互
    const hydrateComponents = (editorInstance) => {
      const componentElements = editorInstance.getBody().querySelectorAll('.interactive-component');
      componentElements.forEach(el => {
        // 避免重复hydrate
        if (!el._reactRootContainer) {
          hydrateRoot(el, <MyInteractiveComponent />);
        }
      });
    };

    // 监听编辑器初始化和内容更新事件，触发hydrate
    editor.on('init', () => hydrateComponents(editor));
    editor.on('setContent', () => hydrateComponents(editor));
  }
});

3. 关键注意事项 #

• 内容过滤配置：必须通过valid_elements配置允许自定义组件的标签和属性，否则TinyMCE会自动过滤未被允许的内容。
• 状态持久化：如果交互组件需要保存状态，可以将状态数据以data-*属性嵌入HTML，hydrate时读取这些属性恢复状态。
• 性能考量：避免在编辑器中插入大量复杂交互组件，可能会影响编辑器的响应速度和稳定性。

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