[ckeditor]: How to disallow only one css style

Question

Hy,

is there any way to disallow only

display: inline-block; and display: block;

and allow other display rules? If I add {display} to the config.disallowedContent rules all display styles will not be allowed (also display table, inline and others).

Tnx for answer.

Answer 1

It's not possible with Advanced Content Filter to filter style property values but CKEDITOR.htmlDataProcessor gives you some handful interface (JSFiddle):

var filterDisplayProperty = {
    attributes: {
        style: function( value, element ) {
            value = CKEDITOR.tools.parseCssText( value, 1 );

            if ( value.display in { 'block': 1, 'inline-block': 1 } ) {
                delete value.display;
            }

            // If there's no CSS rules left, discard style attribute.
            return CKEDITOR.tools.writeCssText( value ) || false;
        }    
    }
};

CKEDITOR.replace( 'editor', {
    toolbar: [ [ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CreateDiv' ] ],
    on: {
        pluginsLoaded: function() {
            // Filter data that comes INTO the editor.
            this.dataProcessor.dataFilter.addRules( filterDisplayProperty ); 

            // Filter data that comes OUT of the editor.
            this.dataProcessor.htmlFilter.addRules( filterDisplayProperty );
        }
    }    
} );