TinyMCE在React中内容变化时无法触发onChange更新状态？

这个问题的关键在于TinyMCE React封装的事件机制和React的状态更新方式上。我们需要搞清楚两件事：第一，TinyMCE的事件触发逻辑；第二，React状态更新的最佳实践。

先说问题的根本原因：onChange并不是TinyMCE官方推荐的React事件，它实际上是一个自定义的封装事件，而它的触发依赖于TinyMCE内部的input或change事件。很多时候，这些事件可能因为某些配置或者初始化顺序的问题没有正确绑定，导致回调函数无法触发。

正确的解决方案是使用onEditorChange事件，但你的代码中提到试过这个方法仍然无效，这可能是由于事件绑定的时机不对或者参数传递有问题。我们可以通过以下步骤来解决：

首先，确保你安装的@tinymce/tinymce-react版本是最新的，旧版本可能存在一些兼容性问题。你可以通过运行npm install @tinymce/tinymce-react@latest来更新。

接下来，调整代码结构，确保事件绑定和状态更新的逻辑清晰且可靠。下面是修正后的代码示例：

import { useState, useRef } from 'react';

import Editor from '@tinymce/tinymce-react';



function TextEditor() {

  const [content, setContent] = useState(''); // 组件状态存储编辑器内容

  const editorRef = useRef(null); // 使用ref获取编辑器实例



  // 初始化时设置默认内容

  const handleInit = (evt, editor) => {

    editor.setContent('初始内容');

    editorRef.current = editor; // 保存编辑器实例

  };



  // 内容变化时的处理函数

  const handleEditorChange = (newContent, editor) => {

    console.log('内容变化:', newContent); // 确保能打印出新内容

    setContent(newContent); // 更新React状态

  };



  return (

    <Editor

      onInit={handleInit} // 初始化时设置内容并保存实例

      onEditorChange={handleEditorChange} // 使用官方推荐的事件

      init={{

        height: 500,

        menubar: false,

        plugins: 'lists link', // 根据需要添加插件

        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright'

      }}

    />

  );

}

需要注意的是，onEditorChange是TinyMCE React封装提供的一个专用事件，专门用于监听内容的变化。它会将最新的内容作为第一个参数传递给回调函数，这样可以避免手动调用editor.getContent()的麻烦。

此外，我在这里引入了useRef来保存编辑器实例。虽然在这个例子中不是必须的，但在实际项目中，直接操作编辑器实例可能会非常有用，比如你需要在某个按钮点击时获取内容或者执行特定命令。

关于为什么之前的代码不工作，主要是因为onChange并不是一个稳定的事件，尤其是在复杂配置下，它的触发条件可能不符合预期。而onEditorChange则是专门为React设计的，能够更可靠地捕获内容变化。

最后再吐槽一句，TinyMCE的React封装文档确实有点模糊，很多细节需要自己摸索。不过只要抓住核心事件机制，问题还是能顺利解决的。

你这个问题是典型的 TinyMCE React 绑定误区。onChange 确实不会像 input 那样频繁触发，它是 blur 时才发，所以感觉“不更新”。真正实时响应内容变化得用 onEditorChange，但你得把它放在 init 里配置才生效。

直接复制过去试试这个写法：

import { useState } from 'react';

import Editor from '@tinymce/tinymce-react';



function TextEditor() {

  const [content, setContent] = useState('');



  return (

    
      initialValue="初始内容"

      init={{

        height: 500,

        menubar: false,

        setup: (editor) => {

          editor.on('input change undo redo', () => {

            setContent(editor.getContent());

            console.log('内容已更新');

          });

        }

      }}

    />

  );

}

关键点：
1. 不要用 onInit 手动 set 内容，改用 initialValue
2. 实时监听靠 setup 里的事件绑定，input change undo redo 覆盖用户所有输入场景
3. getContent() 拿到的是 HTML 字符串，更新状态没问题

这样就能实时同步了。别信文档里说的 onChange，在 React 里基本就是摆设。