如何在设置元素的 HTML 时强制 CKEditor 处理小部件

Question

我创建了一个简单的 CKEditor 小部件，它突出显示了具有 class "pink".

的元素

我还在工具栏中添加了一个 "Pinkify" 按钮，它将所选元素的 HTML 替换为其他一些具有 class "pink" 的元素。

当我单击按钮时，我观察到没有为新插入的元素创建小部件。但是，当我在源代码模式和 WYSISYG 模式之间切换时，会创建小部件。

查看 jsfiddle 及其代码：

CKEDITOR.replace('ck', {
  allowedContent: true,
  extraPlugins: 'pink'
});

CKEDITOR.plugins.add('pink', {
  requires: 'widget',
  init: function(editor) {
    editor.widgets.add('pinkwidget', {
      upcast: function(element) {
        return element.hasClass('pink');
      }
    });

    editor.addCommand('pinkify', {
      editorFocus: 1,
      exec: function(editor) {
        var selection = editor.getSelection(),
          selectedElement = selection.getStartElement();
        if (selectedElement) {
          selectedElement.setHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
          editor.widgets.checkWidgets(); // needed?
        }
      }
    });

    editor.ui.addButton('pinkify', {
      label: 'Pinkify',
      command: 'pinkify'
    });
  },
  onLoad: function() {
    CKEDITOR.addCss('.cke_widget_pinkwidget { background: pink; }');
  }
});

我知道 Whosebug 上有 this question，但我无法让它与在元素上调用的 setHtml 一起工作。您能否建议如何修改代码，以便在 HTML 更新后立即创建小部件？

Answer 1

根据CKEditor团队的说法，CKEDITOR.dom.element.setHtml does not instanciate widgets (see Widgets not initialised after calling setHtml on an element).

是正常的

所以他们给我的解决方法是将插入 HTML 代替所选元素的代码重写为：

if (selectedElement) {
    selectedElement.setHtml("");
    editor.insertHtml("Let's have some <span class=\"pink\">pink</span> widget here!");
}

对于像我一样不知道的人，editor.insertHTML 将 HTML 代码 插入编辑器中所见即所得模式的当前选定位置 。

Updated jsFiddle here.

如何在设置元素的 HTML 时强制 CKEditor 处理小部件

How to force CKEditor to process widgets when setting the HTML of an element

ckeditor

ckeditor4.x