Search code examples
filterckeditorpasteadvanced-custom-fields

Apply CKEditor Advanced Content Filter to a string


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.


Solution

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