CKEditor，初始化使用 insertElement 添加的小部件

2022-01-18 00:00:00 widget jquery javascript ckeditor contenteditable

我创建了一些小部件，它们在初始启动时加载正常，但我通过以下方式将更多此类小部件添加到编辑器:

I have some widgets created, they on initial startup they load fine, but i add more of this type of widget to the editor through:

ckeditorInstance.insertElement(
        CKEDITOR.dom.element.createFromHtml('<html></html>'));

它插入得很好，但 ckeditor 无法识别作为小部件插入的元素，因此小部件可编辑字段没有像应有的那样启用.

It inserts just fine, but the ckeditor does not recognize the element inserted as a widget, so the widget editable fields are not getting enabled like they should.

有什么方法可以让 ckeditor 重新扫描其内容以初始化它尚未初始化的任何新小部件?

Is there any way to make ckeditor do a rescan of its content to initialize any new widgets that it has not already initialized?

推荐答案

数据格式

首先 - 小部件的数据格式(小部件如何在数据中表示)和内部格式(它如何在编辑器中表示)是分开的.您可能熟悉 upcast和 downcast 函数 - 它们使这些格式之间的转换(向上转换意味着将数据格式转换为内部格式).

Data formats

First of all - there's a separation for data format of a widget (how widget is represented in data) and internal format (how it is represented in editor). You may be familiar with the upcast and downcast functions - they make the transition between those formats (upcasting means transforming data format to internal format).

仅当数据 string 被处理时，向上转换和向下转换才有效，但如果您使用 editor#insertElement 插入内容，则没有处理，因此没有向上转换.

Upcasting and downcasting work only if data string is processed, but if you insert content using editor#insertElement there's no processing, so there's no upcasting.

您有两种解决方案:

  1. 使用 editor#insertHtml 而不是 editor#insertElement.您的小部件将在插入之前向上转换，因此它会以良好的格式插入.

  1. Use editor#insertHtml instead of editor#insertElement. Your widget will be upcasted before insertion, so it will be inserted in a good format.

自己负责向上转换(如果需要)并使用 editor#insertElement.

Take care of upcasting (if needed) yourself and use editor#insertElement.

正在初始化

这是小部件生命的第一步 - 它必须被插入.二是被初始化.

Initializing

This was a first step of widget's life - it has to be inserted. Second is to be initialized.

  1. 目前有一个 错误(它会两周内修复)，由 insertHtml 方法插入的小部件未初始化.因此，此时，在使用 editor#insertHtml 插入小部件后，您需要调用:

  1. There's a bug currently (it will be fixed in two weeks), that widgets inserted by the insertHtml method are not initialized. So, at this moment, after inserting widget with editor#insertHtml you need to call:

editor.widgets.checkWidgets()

如果您使用 editor#insertElement，您需要注意初始化小部件.要进行该调用:

If you use editor#insertElement you need to take care of initializing widget. To do that call:

editor.widgets.initOn(元素，'widgetName')

在这两种情况下插入后初始化小部件.

查看 Widgets API 了解更多详情.

Check out the Widgets API for more details.

另请参阅我的回答 解释如何知道一个元素是否是一个小部件以及如何将它们插入到编辑器中.

相关文章