如何以编程方式在CKEditor 5中的当前位置插入链接 [英] How to programatically insert link at current position in CKEditor 5
问题描述
在我的应用中，我有一个特定的对话框来创建内部链接。用户填写完对话框后，我想以编程方式将生成的链接插入到编辑器中当前插入符号的位置。到目前为止，我一直在使用SummerNote，它很容易：
In my app, I have a specific dialog to create internal links. After user finishes filling the dialog I want to programatically insert generated link to current caret position in the editor. So far I've been using SummerNote and there it is easy:
editor.summernote('createLink', {
text: linkTitle,
url: url
});
在CKEditor 5中，我发现这种方法似乎可以满足我的需要：
In CKEditor 5 I found this method which seems like it could do what I need:
doc.enqueueChanges(() => {
editor.data.insertContent(content, doc.selection);
});
我的问题是我不知道如何创建此内容参数。我试图在HTML中创建一个链接并将其传递到那里，但这是行不通的。
My problem is that I don't know how to create this "content" parameter. I tried to create a link in HTML and pass it there, but that doesn't work.
我还试图创建 LinkElement ，但该类在JS运行时中似乎不存在（我正在运行
I also tried to create an instance of LinkElement, but that class doesn't seem to exist in the JS runtime (I'm running CKEditor from build, not from sources).
在我看来，如果不为CKEditor编写插件就可以做到这一点（在我看来，这太过分了）。
It's not clear to me if this is even possible without writing a plugin for CKEditor (which seems to me like an overkill).
推荐答案
1.0.0-beta之后（2018年3月）：
要在编辑器中插入一些数据，只需使用更改块即可：
After 1.0.0-beta (March 2018):
To insert some data into an editor, simply use a "change block":
editor.model.change( writer => {
const insertPosition = editor.model.document.selection.getFirstPosition();
writer.insertText( linkText, { linkHref: linkUrl }, insertPosition );
} );
其中 linkText 和 linkUrl 是您应该从自定义UI中提供的变量。
where linkText and linkUrl are variables that you should provide from your custom UI.
上面的内容对于折叠选择非常有效。链接的文本将插入在插入符号的位置。
The above will work well for collapsed selection. The linked text will be inserted at caret position.
1.0.0-beta中引入的最大区别是我们提供了编写器 change（）调用中使用code>对象，因此您不需要（也不应该）直接使用框架类构造函数。
The big difference introduced in 1.0.0-beta is that we are providing the writer object in change() calls, so you don't need to (and should not) use framework classes constructors directly.
您也可以以与您建议的类似方式使用 editor.model.insertContent ：
You can also use editor.model.insertContent in a similar way that you proposed:
editor.model.change( writer => {
const linkedText = writer.createText( linkText, { linkHref: linkUrl } );
editor.model.insertContent( linkedText, editor.model.document.selection );
} );
如果选择未折叠，这也将正常工作，如 insertContent 的作用更多（例如，如果选择未折叠并且在两个段落之间，则选择内容将被删除并且段落合并）。
This will work properly also if the selection is not collapsed, as insertContent does a little bit more (for example, if selection was not collapsed and was between two paragraphs, selection contents will be removed and paragraphs merged).
DataController＃insertContent（） 接受模型的 DocumentFragment 或 Node （因此 Element 或 文本 – 我刚刚注意到API文档中缺少此信息）。
不幸的是，现在您需要访问权限创建元素或 Text 的构造函数。这意味着您需要从源代码构建CKEditor 5 ，而不是使用现有的版本。这并不难，但确实太过分了。因此，我们正在研究在现有类中公开足够的API部分这样您就可以编写这样的简单集成代码，而无需在应用程序中构建CKEditor 5。
Unfortunately, right now you need to have access to Element's or Text's constructors in order to create them. This means that you need to build CKEditor 5 from source instead of using existing builds. This isn't hard, but it's indeed an overkill. Therefore, we're working now on exposing a sufficient part of the API in the existing classes so that you could write simple integration code like this without building CKEditor 5 into your app.
无论如何，如果您要配置webpack（或简单地分叉一个现有的构建），就可以可以编写一个用于插入链接文本的简单函数：
Anyway, if you'll configure webpack (or simply fork an existing build) you can write a simple function for inserting a linked text:
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中的当前位置插入链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
