CKEditor 5 插入html代码（二）

最新推荐文章于 2025-06-03 13:27:16 发布

原创最新推荐文章于 2025-06-03 13:27:16 发布 · 7.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ckeditor5

ckeditor5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 CKEditor5 的 DecoupledEditor 模式进行 HTML 内容的插入及从编辑器中获取数据的方法。通过具体代码示例展示了如何将 HTML 片段转换为模型片段并插入到编辑器中，同时也提供了获取编辑器当前内容的简单方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大部分情况是需要往编辑器中插入相关html内容，特别是DecoupledEditor模式的编辑器。

//获取编辑器对象
      var editor=ckeditor5Utils.instances[editorId];
        var viewFragment = editor.data.processor.toView( content );
        var modelFragment = editor.data.toModel( viewFragment );
        //插入模型片段
        editor.model.insertContent( modelFragment, editor.model.document.selection );

获取编辑器内容的话比较简单：