CKEditor 5 如何在内容末尾追加文本？两种尝试方法均遇问题

问题分析 #

• 第一种方法依赖当前选区位置，若打开模态框时光标处于内容开头，插入位置就会是开头，无法固定到内容末尾。
• 第二种方法错误点：createRange()必须传入起始位置参数，且insertText不支持直接插入HTML，参数使用不符合API要求，导致抛出model-createpositionat-offset-required错误。

正确解决方案 #

1. 追加纯文本到内容末尾

直接获取编辑器根元素的末尾位置，插入纯文本：

rememberEditorInvoiceMailing[0].model.change(writer => {
  const root = rememberEditorInvoiceMailing[0].model.document.getRoot();
  // 创建根元素末尾的插入位置
  const insertPosition = writer.createPositionAt(root, 'end');
  writer.insertText('需要追加的纯文本内容', insertPosition);
});

2. 追加HTML内容到内容末尾

CKEditor的Model层无法直接插入HTML，需先将HTML转换为Model可识别的结构，再插入：

const editor = rememberEditorInvoiceMailing[0];
const htmlContent = '<p>需要追加的HTML内容</p>';

// 将HTML转换为View片段，再转为Model片段
const viewFragment = editor.data.processor.toView(htmlContent);
const modelFragment = editor.data.toModel(viewFragment);

editor.model.change(writer => {
  const root = editor.model.document.getRoot();
  const insertPosition = writer.createPositionAt(root, 'end');
  writer.insert(modelFragment, insertPosition);
});

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