javascript - CKEditor,初始化添加了insertElement的widget

标签 javascript jquery widget ckeditor contenteditable

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

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

它插入得很好,但 ckeditor 无法将插入的元素识别为小部件,因此小部件可编辑字段未按应有的方式启用。

有没有办法让 ckeditor 重新扫描它的内容来初始化它还没有初始化的任何新的小部件?

最佳答案

数据格式

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

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

插入

你有两个解决方案:

  1. 使用 editor#insertHtml而不是 editor#insertElement。您的小部件将在插入之前进行升级,因此将以良好的格式插入。

  2. 自行处理向上转换(如果需要)并使用 editor#insertElement

正在初始化

这是小部件生命的第一步——它必须被插入。其次是要初始化。

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

    editor.widgets.checkWidgets()

  2. 如果您使用 editor#insertElement,您需要注意初始化小部件。要执行此调用:

    editor.widgets.initOn( element, 'widgetName' )

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

查看 Widgets API了解更多详情。

另见我的回答 explaining how to know if an element is a widget and how to insert them into editor .

关于javascript - CKEditor,初始化添加了insertElement的widget,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20237845/

相关文章:

jquery - 单击图像时尝试删除类

html - 更改电话号码小部件的颜色(Wordpress)

javascript - 带时间刻度的图表.js 宽条

javascript - css touch-action none on body, pinch-zoom on element

javascript - 使用 javascript/jquery 将 div 定位在图像的左上角

gwt - 如何使用 uiBinder 将复合小部件嵌套到主 ui.xml 文件中?

android - 使用android中的 float 小部件服务保持屏幕打开

javascript - 进一步点击会发生什么

javascript - 从列表中的列表中提取信息。

javascript - Google Analytics 错误的事件报告