Question

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

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

在CKEditor 5中，我发现这种方法似乎可以满足我的需要：

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

我的问题是我不知道如何制作这个＆＃34;内容＆＃34;参数。我尝试在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是您应该从自定义用户界面提供的变量。

以上内容适用于折叠选择。链接的文本将插入到插入位置。

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的构造函数才能创建它们。这意味着您需要build CKEditor 5 from source而不是使用现有版本。这并不难，但确实是一种矫枉过正。因此，我们现在正在exposing a sufficient part of the API in the existing classes上工作，这样您就可以编写这样的简单集成代码，而无需在您的应用中构建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 );
    } );
}

如何以编程方式在CKEditor 5

1 个答案:

1.0.0-beta（2018年3月）之后：

在1.0.0-beta之前