Apply CKEditor Advanced Content Filter to a string

Question

How can I apply CKEditor's Advanced Content Filter to a string?

I'm trying to intercept pasted content using editor.on('paste', ...), get its ACF-filtered value, and then apply my own transformations to the filtered value. After this point, it's okay if it runs through the ACF again.

Answer 1

I reported recently a ticket which I think you'll find interesting: http://dev.ckeditor.com/ticket/11621. There's a pretty high chance that this feature will be introduced in CKEditor 4.5. (Edit: This feature got to CKEditor in 4.5 – CKEDITOR.config.pasteFilter).

As for your question - to apply ACF to an HTML string you need to:

1. Parse it using CKEDITOR.htmlParser.fragment.fromHtml().
2. Call filter.applyTo on document fragment created in previous step. You can either use the standard editor.filter or create your own instance with different settings.
3. Serialise document fragment back to HTML string.

For example:

    // 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>'

Answer 2

Building on @Reinmar's answer, if you are looking to apply cerain disallowed rules & optionally react to a paste event.

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();
  });
});