ReactJS中从父组件动态设置CKEditor 4数据的问题

CKEditor 4的React封装组件默认不会自动监听data props的变化来同步编辑器内容，只会在首次渲染时读取初始值。要解决这个问题，有两种常用方案：

方案1：通过key属性强制重新渲染组件 #

当父组件传递的内容content变化时，给CKEditor组件设置一个随content变化的key，React会识别到组件的key改变，从而销毁旧实例并创建新的编辑器实例，自动加载新的data值。

示例代码：

<CKEditor
  key={content}
  data={content}
  config={{
    toolbar: [['Bold', 'Italic', 'Underline']]
  }}
/>

这种方式实现简单，适合不需要保留编辑器内部状态（如光标位置、历史编辑记录）的场景。

方案2：通过编辑器实例API手动更新内容 #

如果需要保留编辑器的内部状态，可以通过ref获取CKEditor实例，然后在content props变化时调用setData方法更新内容。

示例代码：

import { useEffect, useRef } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

function Editor({ content }) {
  const editorRef = useRef(null);

  useEffect(() => {
    // 当content变化时，调用编辑器的setData方法更新内容
    if (editorRef.current) {
      editorRef.current.setData(content);
    }
  }, [content]);

  return (
    <CKEditor
      ref={editorRef}
      editor={ClassicEditor}
      data={content}
      config={{
        toolbar: [['Bold', 'Italic', 'Underline']]
      }}
    />
  );
}

这种方式更新更平滑，不会重置编辑器的其他状态，适合对编辑体验要求较高的场景。

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