Применение расширенного фильтра содержимого CKEditor к строке

Как я могу применить расширенный фильтр содержимого CKEditor к строке?

Я пытаюсь перехватить вставленный контент с помощью editor.on('paste',...), получить его значение, отфильтрованное ACF, а затем применить свои собственные преобразования к отфильтрованному значению. После этого все в порядке, если он снова проходит через ACF.


person Michael I    schedule 06.03.2014    source источник


Ответы (2)


Недавно я сообщал о заявке, которая, я думаю, будет вам интересна: http://dev.ckeditor.com/ticket/11621. Вероятность того, что эта функция появится в CKEditor 4.5, довольно высока. (Изменить: эта функция появилась в CKEditor в версии 4.5 — CKEDITOR.config.pasteFilter).

Что касается вашего вопроса - чтобы применить ACF к строке HTML, вам необходимо:

  1. Проанализируйте его с помощью CKEDITOR.htmlParser.fragment.fromHtml().
  2. Вызовите filter.applyTo для фрагмента документа, созданного на предыдущем шаге. Вы можете использовать стандартный editor.filter или создать свой собственный экземпляр. с разными настройками.
  3. Сериализировать фрагмент документа обратно в строку HTML.

Например:

    // Create standalone filter passing 'p' and 'b' elements.
var filter = new CKEDITOR.filter( 'p b' ),
    // Parse HTML string to pseudo DOM structure.
    fragment = CKEDITOR.htmlParser.fragment.fromHtml( '<p><b>foo</b> <i>bar</i></p>' ),
    writer = new CKEDITOR.htmlParser.basicWriter();

filter.applyTo( fragment );
fragment.writeHtml( writer );
writer.getHtml(); // -> '<p><b>foo</b> bar</p>'
person Reinmar    schedule 08.03.2014
comment
Чрезвычайно полезно! Большое спасибо! - person Michael I; 10.03.2014

Основываясь на ответе @Reinmar, если вы хотите применить некоторые запрещенные правила и, при желании, отреагировать на событие вставки.

CKEDITOR.on('instanceReady', function(ev) {
  ev.editor.on('paste', function(evt) {
    // Standalone filter based off the existing filter.
    // If the editor is removed, so it our custom filter object.
    // We don't need to pass an editor however.
    // @see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html
    var filter = new CKEDITOR.filter(evt.editor);
    // Allow all content.
    // @see https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html#special-features
    // Don't set filter.allowedContent property directly, doesn't work.
    var allowed = filter.allow({
      '$1': {
          // Use the ability to specify elements as an object.
          elements: CKEDITOR.dtd,
          attributes: true,
          styles: true,
          classes: true
      }
    });
    if (allowed === false) {
      console.warn('An error occured setting the custom rules.');
      return;
    }
    // Now disllow color attribute & colour background-color, text-decoration styles.
    // Format "elements [attributes, attr2]{styles}(classes)"."
    // Default is '*[color]; *{color, background-color, text-decoration}'.
    filter.disallow('*[color]; *{color, background-color, text-decoration}');
    // Filter it now.
    var fragment = CKEDITOR.htmlParser.fragment.fromHtml(evt.data.dataValue);
    var writer = new CKEDITOR.htmlParser.basicWriter();
    filter.applyTo(fragment);
    fragment.writeHtml(writer);
    var processed_html = writer.getHtml();
    // Set the value of what will be pasted.
    evt.data.dataValue = processed_html;
    console.log('Content filtered.');
    // Clean up - free up memory.
    filter.destroy();
  });
});
person Joshua Graham    schedule 04.12.2019