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

2023-09-07前端开发问题

本文介绍了CKEditor，初始化使用 insertElement 添加的小部件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

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.

您有两种解决方案:

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



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

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

                        这篇关于CKEditor，初始化使用 insertElement 添加的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End

相关推荐

js删除数组中指定元素的5种方法

layui中表单会自动刷新的问题

JavaScript小数运算出现多位的解决办法

jQuery怎么动态向页面添加代码？

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

热门文章

热门精品源码

最新VIP资源