如何通过用户脚本在CKEditor 5（或其他富文本编辑器）中插入文本

直接操作DOM的方法对CKEditor5无效，因为它用独立的模型管理编辑内容，必须通过官方API完成文本插入，具体步骤如下：

• 获取CKEditor5实例
  Zendesk的编辑器实例由CKEditor统一管理，你可以从全局实例集合中筛选出目标编辑器：

  // 查找Zendesk的CKEditor实例
  function getZendeskEditor() {
    return Array.from(window.CKEditor.instances).find(instance => {
      // 通过容器类判断是否为Zendesk编辑器
      return instance.element.closest('.zendesk-editor') !== null;
    });
  }
  

• 插入文本到编辑器
  拿到实例后，调用model.insertText()方法就能在当前光标位置插入文本，这是最直接的纯文本插入方式：

  const suggestion = "你的补全建议文本";
  const editor = getZendeskEditor();
  
  if (editor) {
    // 在光标位置插入文本
    editor.model.insertText(suggestion);
    // 确保编辑器保持焦点
    editor.focus();
  }
  

• 处理编辑器加载时机
  Tampermonkey脚本可能早于编辑器加载完成，需要轮询等待编辑器初始化：

  // 轮询等待编辑器初始化完成
  let editorCheckTimer = setInterval(() => {
    const editor = getZendeskEditor();
    if (editor) {
      clearInterval(editorCheckTimer);
      // 保存实例，后续补全操作直接调用
      window.zendeskEditor = editor;
    }
  }, 300);
  

为什么原方法无效？ #

CKEditor5采用**模型-视图-控制器（MVC）**架构，编辑区域的DOM只是它生成的视图层，直接修改DOM不会同步到内部数据模型，编辑器刷新或执行操作后，手动插入的内容会被覆盖。只有通过模型层API操作，才能让内容被编辑器正确识别和保存。

扩展：插入带格式的内容 #

如果需要插入带样式的内容（比如加粗、链接），可以用model.insertContent()方法，示例如下：

const editor = getZendeskEditor();
if (editor) {
  // 创建带加粗样式的文本节点
  const boldText = editor.model.createElement(
    'bold', 
    {}, 
    editor.model.createText("带加粗的补全文本")
  );
  // 插入到光标位置
  editor.model.insertContent(boldText);
}

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