如何以编程方式在CKEditor 5中的当前位置插入链接
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何以编程方式在CKEditor 5中的当前位置插入链接相关的知识,希望对你有一定的参考价值。
在我的应用程序中,我有一个特定的对话框来创建内部链接。用户完成填充对话框后,我想以编程方式将生成的链接插入编辑器中当前的插入符号位置。到目前为止,我一直在使用SummerNote,很容易:
editor.summernote('createLink', {
text: linkTitle,
url: url
});
在CKEditor 5中,我发现这种方法似乎可以满足我的需求:
doc.enqueueChanges(() => {
editor.data.insertContent(content, doc.selection);
});
我的问题是我不知道如何创建这个“内容”参数。我尝试在html中创建一个链接并将其传递给那里,但这不起作用。
我还试图创建一个LinkElement的实例,但是这个类似乎不存在于JS运行时中(我从构建运行CKEditor,而不是从源代码运行)。
我不清楚如果没有为CKEditor编写一个插件(这在我看来就像是一种矫枉过正),这是否可行。
在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
或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中的当前位置插入链接的主要内容,如果未能解决你的问题,请参考以下文章