gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 23:38:06 29 4
gpt4 key购买 nike

在我的应用程序中,我有一个特定的对话框来创建内部链接。用户完成填充对话框后,我想以编程方式将生成的链接插入到编辑器中的当前插入符号位置。到目前为止,我一直在使用 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 );
} );

哪里 linkTextlinkUrl是您应该从自定义 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(或简单地 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 );
} );
}

关于ckeditor - 如何以编程方式在 CKEditor 5 中的当前位置插入链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47611200/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com