如何使用 JavaScript/jQuery 在 CkEditor5 中动态创建 html 片段？答案

【问题标题】：How to dynamically create html snippet in CkEditor5 using JavaScript/jQuery?如何使用 JavaScript/jQuery 在 CkEditor5 中动态创建 html 片段？
【发布时间】：2021-04-26 07:10:26
【问题描述】：

我正在将当前使用 Redactor 和 jQuery 的自定义应用程序转换为 CkEditor v5。它通常可以工作，但我们有一个功能可以生成一些 HTML，然后将其插入到编辑器中。对于旧编辑器，这很好用，但对于 CkEditor，我认为我需要将 HTML 插入新的 HTML sn-p 中。我可以用 class=raw-html-embed 将 html 包装在一个 div 中，这是 sn-p 插件正常生成的，但是 CkEditor 不会将其识别为新的 sn-p，它只是作为文本插入。

是否有 API 调用或其他进程允许触发创建新的 HTML sn-p？

【问题讨论】：

标签： jquery plugins ckeditor5

【解决方案1】：

我最终查看了剪贴板源代码并能够弄清楚。只需要将字符串转换为视图元素，然后转换为模型片段，然后插入。文档中的一个简单示例会有所帮助！如果这不是最好的方法，请发表评论。

ckeditor.model.change(writer => {
    const clipboard = ckeditor.plugins.get('Clipboard');
    const view = clipboard._htmlDataProcessor.toView(newText);
    const modelFragment = ckeditor.data.toModel(view, '$clipboardHolder');
    if (modelFragment.childCount === 0) {
        return;
    }
    ckeditor.model.insertContent(modelFragment);
});

【讨论】：