Как заставить CKEditor обрабатывать виджеты при настройке HTML элемента

Question

У меня есть простой виджет CKEditor, который выделяет элементы, имеющие класс «розовый».

Я также добавил кнопку «Pinkify» на панель инструментов, которая заменяет HTML-код выбранного элемента некоторыми другими элементами, имеющими класс «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; }');
  }
});

Мне известен этот вопрос о Stackoverflow, но я не могу заставить его работать с setHtml, вызванным для элемента. Можете ли вы предложить, как изменить код, чтобы виджеты создавались сразу после обновления HTML?

Answer 1

Согласно команде CKEditor, обычно CKEDITOR.dom.element.setHtml не создает экземпляры виджетов (см. Виджеты не инициализируются после вызова setHtml для элемента ).

Так что обходной путь, который мне дали, состоял в том, чтобы переписать код, который вставляет HTML вместо выбранного элемента, в:

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

Для таких, как я, кто не знал, editor.insertHTML вставляет HTML-код в текущую выбранную позицию в редакторе в режиме WYSIWYG.

Обновлен jsFiddle здесь .