使用 CKEditor 5 中的 Writer.insert* 函数插入 HTML

Question

我看到该类Writer有插入文本的方法。但是，我不明白哪种方法是将 HTML 插入编辑器的正确方法。

说明

我的案例场景是：用户可以创建特定的内容模板并保存它。稍后用户应该能够将相同的内容插入编辑器并开始修改。

我使用以下代码处理这个问题

activeCKE.model.change( writer => {
    writer.insertElement( "text to insert", activeCKE.model.document.selection.getFirstPosition() );
    activeCKE.setData(activeCKE.getData()); // to refresh the contents

}

它适用于“**文本**”，但不适用于“ <strong>text</strong>”。后者按原样显示。

所以我的问题是；以编程方式插入已经使用类似类创建的 HTML 字符串的正确方法是什么Writer？

我看到 中有一个模板的概念ui/template，但是我不清楚如何转换editor.getData()为该模板。

请注意：我不想为用户提供 HTML 编辑界面。我只是想创建模板来让他的生活更轻松。因此，我的问题与基于“查看源代码”的问题无关。

Answer 1

当我继续我的研究帖子提出这个问题时，我找到了常见问题解答，在那里我得到了答案。

const viewFragment = activeCKE.data.processor.toView( "<p>HTML Text</p>" );
const modelFragment = activeCKE.data.toModel( viewFragment );

activeCKE.model.insertContent( modelFragment, activeCKE.model.document.selection );

这满足了我的用例。不过，我鼓励社区发布其他可能的变体，例如使用Template类。特别是因为任何类型的标签（br、p 等）引起的换行都会被过滤掉。

有兴趣在CKEditor 5中显示源代码并允许源代码操作的开发人员可以创建一个插件，editor.getData()在对话框中显示内容（或他们喜欢的东西），然后重置编辑器的内容并以类似于以下的方式插入内容上面演示的那个。