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

时间:2013-11-27 09:01:00

标签: javascript jquery widget ckeditor contenteditable

我创建了一些小部件,他们在初次启动时加载得很好,但我通过以下方式将更多此类小部件添加到编辑器中:

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

它插入很好,但是ckeditor无法识别作为窗口小部件插入的元素,因此窗口小部件可编辑字段不会像它们应该那样启用。

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

1 个答案:

答案 0 :(得分:15)

数据格式

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

仅在处理数据字符串时才进行向上转发和向下转换,但如果使用editor#insertElement插入内容则无法处理,因此无法向上转发。

插入

你有两个解决方案:

  1. 使用editor#insertHtml代替editor#insertElement。您的小部件将在插入之前进行上传,因此它将以良好的格式插入。

  2. 自己负责预告(如果需要)并使用editor#insertElement

  3. 初始化

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

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

      editor.widgets.checkWidgets()

    2. 如果您使用editor#insertElement,则需要注意初始化小部件。要做那个电话:

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

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

      查看Widgets API了解详情。

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