filtering CKEditor HTML attributes

3
votes

I've found many posts about filtering complete HTML tags when CKEditor submits data (eg: stripping SCRIPT, STYLE, etc). What I need to filter is particular attributes, but leave the original tag.

For example, I'm fine if a user submits data that has a P, DIV or SPAN tag, but if they submit a P, DIV or SPAN that has a STYLE attribute, I need to remove the STYLE attribute.

I can't seem to find this, but open to anyone who has insight.

1
htmlckeditorfiltering
So you're doing this on the server? Which technology are you using? – Musa

1 Answers

5
votes

There are two solutions for your problem:

  1. (recommended) Advanced Content Filter (ACF) (since 4.1):

    CKEDITOR.replace( 'editor1', {
    allowedContent: 'span div p[id,class]; h1 a img hr table tr td ul ol li[*]{*}(*)'
} );

    With ACF you can precisely specify which tags, which attributes, classes and styles will be accepted (produced) by your editor. See more about the rules. Also download the latest 4.1 build and play with official Advanced Content Filter sample.

  2. The second option is dataProcessor (3.x, 4.x):

    editor.dataProcessor.htmlFilter.addRules( {
    elements: {
        $: function( element ) { // you can specify p, div etc. here instead of $ (wildcard)
            if ( element.attributes.style ) {
                 console.log( 'Nuke style attr on' element );
                 delete element.attributes.style;
            }
        }
    }
});