如何以编程方式在CKEditor 5中的当前位置插入链接

Question

在我的应用程序中,我有一个特定的对话框来创建内部链接.用户完成填充对话框后,我想以编程方式将生成的链接插入编辑器中当前的插入符号位置.到目前为止,我一直在使用SummerNote,很容易:

editor.summernote('createLink', {
     text: linkTitle,
     url: url
});

在CKEditor 5中,我发现这种方法似乎可以满足我的需求:

doc.enqueueChanges(() => {
    editor.data.insertContent(content, doc.selection);
});

我的问题是我不知道如何创建这个"内容"参数.我尝试在HTML中创建一个链接并将其传递给那里,但这不起作用.

我还试图创建一个LinkElement实例,但该类似乎不存在于JS运行时(我从构建运行CKEditor,而不是从源代码运行).

我不清楚如果没有为CKEditor编写一个插件(这在我看来就像是一种矫枉过正),这是否可行.

Answer 1

在1.0.0-beta(2018年3月)之后:

要将一些数据插入编辑器,只需使用"更改块":

editor.model.change( writer => {
    const insertPosition = editor.model.document.selection.getFirstPosition();
    writer.insertText( linkText, { linkHref: linkUrl }, insertPosition );
} );

其中,linkText和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's Text' 或's的构造函数才能创建它们.这意味着您需要从源代码构建CKEditor 5而不是使用现有构建.这并不难,但确实是一种矫枉过正.因此,我们现在正在努力在现有类中公开API的足够部分,以便您可以编写这样的简单集成代码,而无需将CKEditor 5构建到您的应用程序中.

无论如何,如果您将配置webpack(或简单地分叉现有构建),您可以编写一个简单的函数来插入链接文本:

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 );
    } );
}