CKEditor - add in custom attribute

Question

In CKEditor I'm having issues adding some dataProcessor rules.

I have a custom plugin defined in ckeditor/plugsin/x I have added the plugin name to config.js extraPlugins

My plugin looks like

CKEDITOR.plugins.add('x',   
  {    

    init:function(editor)
    { 
        editor.dataProcessor.htmlFilter.addRules(
        {
            elements :
            {
                div : function( element )
                {
                    element.setAttribute("x","y");
                }
            }
        });

        editor.dataProcessor.dataFilter.addRules(
        {
            elements :
            {
                div : function( element )
                {
                    element.setAttribute("x","y");
                }
            }
        });

});

However it doesn't insert the attribute.

Am I doing something wrong here?

Answer 1

CKEDITOR.dataProcessor works with CKEDITOR.htmlParser.element instead of CKEDITOR.dom.element. CKEDITOR.htmlParser.element is not a real DOM element but an abstract object to make parsing and filtering much easier. It has own set of methods and attributes.

Also note that dataFilter works on input data (what comes to the editor) while htmlFilter deals with output data (content produced by the editor).

You should also get used to Allowed Content Filter because quite likely you need to configure it to have the editor working properly, i.e. config.extraAllowedContent = 'div[x]'.

See the fiddle.

CKEDITOR.replace( 'editor', {
    extraAllowedContent: 'div',
    on: {
        pluginsLoaded: function() {
            this.dataProcessor.dataFilter.addRules( {
                elements: {
                    div: function( el ) {
                        console.log( 'processing', el, 'in dataFilter' );
                        el.attributes.datafilter = 'x';
                    }
                }
            } );    

            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    div: function( el ) {
                        console.log( 'processing', el, 'in htmlFilter' );
                        el.attributes.htmlfilter = 'y';
                    }
                }
            } );              
        }
    }
} );