React中使用TinyMCE加载数据库HTML内容时setContent报错求助

你遇到的cannot read properties of null (reading setContent)错误，本质是调用setContent时编辑器实例还没完成初始化，导致useRef.current为null。下面是几种实用的解决方法：

方法一：通过onInit回调确保实例就绪 #

编辑器初始化完成时会触发onInit事件，此时可以安全获取到编辑器实例，直接在这里加载数据库内容：

import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

const ContentEditor = ({ dbContent }) => {
  const editorRef = useRef(null);

  // 编辑器初始化完成时执行
  const handleInit = (_, editor) => {
    editorRef.current = editor;
    // 加载数据库内容
    editor.setContent(dbContent);
  };

  // 保存内容到数据库
  const saveToDB = () => {
    if (editorRef.current) {
      const content = editorRef.current.getContent();
      // 这里编写保存逻辑，比如调用API存入数据库
    }
  };

  return (
    <div>
      <Editor
        onInit={handleInit}
        apiKey="你的API密钥"
        init={{
          height: 500,
          menubar: false,
          plugins: ['advlist autolink lists link image code'],
          toolbar: 'undo redo | bold italic | link image | code'
        }}
      />
      <button onClick={saveToDB}>保存内容</button>
    </div>
  );
};

方法二：用useEffect监听内容变化（适合异步/动态更新场景） #

如果数据库内容是异步获取的（比如从后端API拉取），或者需要在编辑过程中切换内容，可以用useEffect监听内容变化，同时检查编辑器实例是否存在：

import { useRef, useEffect } from 'react';
import { Editor } from '@tinymce/tinymce-react';

const ContentEditor = ({ dbContent }) => {
  const editorRef = useRef(null);

  const handleInit = (_, editor) => {
    editorRef.current = editor;
  };

  // 当数据库内容变化时，更新编辑器内容
  useEffect(() => {
    if (editorRef.current && dbContent) {
      editorRef.current.setContent(dbContent);
    }
  }, [dbContent]);

  // 保存逻辑同方法一
  const saveToDB = () => {
    if (editorRef.current) {
      const content = editorRef.current.getContent();
      // 执行保存
    }
  };

  return (
    <div>
      <Editor
        onInit={handleInit}
        apiKey="你的API密钥"
        init={{ /* 编辑器配置 */ }}
      />
      <button onClick={saveToDB}>保存</button>
    </div>
  );
};

方法三：直接使用initialValue属性（最简初始化方式） #

如果只需要在编辑器首次加载时填入数据库内容，不需要后续动态更新，直接用initialValue传入内容即可，无需手动调用setContent：

<Editor
  initialValue={dbContent}
  apiKey="你的API密钥"
  init={{ /* 编辑器配置 */ }}
/>

额外注意事项 #

• 确保数据库返回的HTML内容格式合法，避免TinyMCE解析异常；
• 如果使用API密钥，要确保密钥有效且配置正确；
• 动态更新内容时，建议给dbContent加防抖处理，避免频繁调用setContent影响性能。

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