CkEditor5 insertContent 功能不起作用

Answer 1

此错误似乎是由于尝试使用

insertContent

方法插入 HTML 引起的 - 此方法似乎默认需要纯文本字符串，尽管我们可以通过一些额外的步骤使其接受 HTML。

首先，您需要获取 HTML 数据处理器：

const htmlDP = editorInstance.data.processor;

接下来，您需要使用我们刚刚获得的 HTML 数据处理器将 HTML 字符串转换为 viewFragment：

const viewFragment = htmlDP.toView("<p><b>Test</b> Content</p>");

最后，我们需要将 viewFragment 转换为 modelFragment：

const modelFragment = editorInstance.data.toModel( viewFragment );

现在我们可以将 modelFragment 传递给

insertContent

方法：

editorInstance.model.insertContent(modelFragment);

这应该消除错误并允许将标记字符串插入编辑器中

Answer 2

对于那些尝试在 React 项目中实现它的人，

使用“setData”可能是重要的选择之一。

const ChildComponent1 = ({ editorRef }) => (
  <CKEditor
   {...other props}
   onReady={(editor) => {
    editorRef.current = editor;
   }}
  />
)

---

const ChildComponent2 = ({ editorRef }) => {

  const insertTest = () => {
    const editorInstance = editorRef.current;
    if (editorInstance && typeof editorInstance.setData === 'function') {
      const contentToInsert = '<p>test</p>';
      const currentData = editorInstance.getData();
      const newData = currentData + contentToInsert;
      editorInstance.setData(newData);
    }
  };

  return (
    <div css={{ padding: '4px 16px 6px' }} onClick={insertTest}>
      test
    </div>
  );
}

---

Const ParentComponent = () => {
  const editorRef = useRef(null);
  
  return (
    <div>
      <ChildComponent1 editorRef={editorRef} />
      <ChildComponent2 editorRef={editorRef} />
    </div>
  )
}

Answer 3

同样的事情发生在我身上，所以我决定使用 textarea 字段和 setData 函数。 因此，就我而言，我使用隐藏的文本区域字段，而不是直接在 CKEditor 中设置数据。 每当它发生变化时，我都会从中获取数据并在 CKEditor 中设置，如下所示：

document.querySelector('#textareaField').addEventListener('change', () => {
    const textareaFieldContent = document.querySelector('#textareaField').value;
    editor.setData(textareaFieldContent);
});

为了在将数据放入文本区域后触发更改事件，我使用了以下代码：

const changeEvent = new Event('change', { bubbles: true });
document.querySelector('#textareaField').dispatchEvent(changeEvent);

如果您已经解决了问题，希望它能对您或其他任何人有所帮助。