CKEditor React组件onChange事件无法返回编辑器内容求助

问题出在你对CKEditor React组件onChange回调参数的使用上——CKEditor5的onChange并不会直接返回编辑器内容，而是传递事件对象和编辑器实例（或仅编辑器实例，取决于版本），你需要通过编辑器实例的getData()方法提取内容。

修正后的代码 #

首先修改你的onChange处理函数：

const changeHeaderText = (event, editor) => {
  // 获取编辑器的HTML内容
  const editorContent = editor.getData();
  console.log("编辑器内容：", editorContent);
  // 这里可以更新你的状态
  setPageState(prev => ({ ...prev, printHeaderText: editorContent }));
}

如果你的CKEditor React版本更简洁（部分旧版本），也可以直接接收编辑器实例作为参数：

const changeHeaderText = (editor) => {
  const editorContent = editor.getData();
  console.log("编辑器内容：", editorContent);
}

关键说明 #

• CKEditor5的核心设计是通过编辑器实例操作内容，getData()方法会返回编辑器中的格式化HTML内容，这也是你初始化时initData接收的格式。
• 确保你使用的是官方的@ckeditor/ckeditor5-react包，不同封装版本的回调参数可能有差异，但官方包的标准用法如上。

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