Question

我创建了一个简单的CKEditor小部件，以突出显示具有“粉红色”类的元素。

我还向工具栏添加了一个“ Pinkify”按钮，该按钮将所选元素的HTML替换为其他一些具有“粉红色”类的元素。

单击按钮时观察到的是未为新插入的元素创建窗口小部件。但是，当我在“源”模式和“所见即所得”模式之间切换时，会创建小部件。

请参见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; }');
  }
});

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

Answer 1

根据CKEditor团队的说法，CKEDITOR.dom.element.setHtml不会实例化窗口小部件是正常的（请参见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处理窗口小部件

1 个答案: