在CKEditor 5中使用Writer.Insert*函数插入HTML
我看到在CKEditor 5中使用Writer.Insert*函数插入HTML,ckeditor,ckeditor5,Ckeditor,Ckeditor5,我看到Writer类有插入文本的方法。但是,我无法理解哪些方法是将HTML插入编辑器的正确方法 解释 我的情况是: 用户可以创建特定的内容模板并保存它。稍后,用户应该能够将相同的内容插入编辑器并开始修改 我使用下面的代码来处理这个问题 activeCKE.model.change( writer => { writer.insertElement( "text to insert", activeCKE.model.document.selection.getFirstPositi
Writer
类有插入文本的方法。但是,我无法理解哪些方法是将HTML插入编辑器的正确方法
解释
我的情况是:
用户可以创建特定的内容模板并保存它。稍后,用户应该能够将相同的内容插入编辑器并开始修改
我使用下面的代码来处理这个问题
activeCKE.model.change( writer => {
writer.insertElement( "text to insert", activeCKE.model.document.selection.getFirstPosition() );
activeCKE.setData(activeCKE.getData()); // to refresh the contents
}
它适用于“**文本**”,但不适用于“文本”。后者看起来是这样的
所以我的问题是,以编程方式插入HTML字符串的正确方法是什么?该字符串是使用Writer
类之类的工具创建的?
我在ui/template
中看到了模板的概念,但是我不清楚如何将editor.getData()
转换为该模板
请注意:我不想给用户一个HTML编辑界面。我只是想创建模板,让他的生活更轻松。因此,我的问题与基于“查看源代码”的问题无关。当我继续我的研究文章提出这个问题时,我进入了常见问题解答,在那里我得到了答案
const viewFragment = activeCKE.data.processor.toView( "<p>HTML Text</p>" );
const modelFragment = activeCKE.data.toModel( viewFragment );
activeCKE.model.insertContent( modelFragment, activeCKE.model.document.selection );
const viewFragment=activeCKE.data.processor.toView(“HTML Text”);
constmodelfragment=activeCKE.data.toModel(viewFragment);
activeCKE.model.insertContent(modelFragment,activeCKE.model.document.selection);
这满足了我的用例。但是,我鼓励社区发布其他可能的变体,例如使用Template
class特别是因为任何类型的标签(br、p等)导致的换行被过滤掉。
有兴趣在CKEditor 5中显示源代码并允许对源代码进行操作的开发人员可以创建一个插件,在对话框(或他们喜欢的东西)中显示editor.getData()
的内容,然后重置editor的内容,并以类似于上面演示的方式插入内容