1.0.0-beta(2018 年 3 月)之后:
要将一些数据插入编辑器,只需使用“更改块”:
editor.model.change( writer => {
const insertPosition = editor.model.document.selection.getFirstPosition();
writer.insertText( linkText, { linkHref: linkUrl }, insertPosition );
} );
wherelinkText
和linkUrl
是您应该从自定义 UI 中提供的变量。
以上将适用于折叠的选择。链接的文本将插入到插入符号位置。
1.0.0-beta 引入的最大区别是我们writer
在调用中提供对象change()
,因此您不需要(也不应该)直接使用框架类构造函数。
您也可以editor.model.insertContent
按照您提出的类似方式使用:
editor.model.change( writer => {
const linkedText = writer.createText( linkText, { linkHref: linkUrl } );
editor.model.insertContent( linkedText, editor.model.document.selection );
} );
如果选择没有折叠,这也将正常工作,还有insertContent
一点点(例如,如果选择没有折叠并且在两个段落之间,则选择内容将被删除并合并段落)。
1.0.0-beta 之前
DataController#insertContent()
接受模型的DocumentFragment
或Node
(所以Element
或Text
-我刚刚注意到 API 文档中缺少此信息)。
不幸的是,现在您需要访问Element
' 或Text
' 构造函数才能创建它们。这意味着您需要从源代码构建 CKEditor 5,而不是使用现有构建。这并不难,但确实是矫枉过正。因此,我们现在正在努力在现有类中公开 API 的足够部分,以便您可以编写像这样的简单集成代码,而无需将 CKEditor 5 构建到您的应用程序中。
无论如何,如果您要配置 webpack(或简单地 fork 现有构建),您可以编写一个简单的函数来插入链接文本:
import Text from '@ckeditor/ckeditor5-engine/src/model/text';
function insertLink( linkText, linkHref ) {
const text = new Text( linkText, { linkHref } );
editor.document.enqueueChanges( () => {
editor.data.insertContent( text, editor.document.selection );
} );
}