How to add class or attribute automatically to img tags in CKEditor?

Question

I\'m using CKEditor version 3.6

I want to automatically add class=\"newsleft\" to any image tag added through the WYSIWYG.

I\'ve seen a few post

Answer 1

Basically put it in instanceReady listener and it will be fine (3.x and 4.x) (fiddle):

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,toolbar,sourcearea,image,basicstyles',
    on: {
        instanceReady: function() {
            this.dataProcessor.htmlFilter.addRules( {
                elements: {
                    img: function( el ) {
                        // Add an attribute.
                        if ( !el.attributes.alt )
                            el.attributes.alt = 'An image';

                        // Add some class.
                        el.addClass( 'newsleft' );
                    }
                }
            } );            
        }
    }
} );

CKEDITOR.htmlParser.element.addClass is available since CKEditor 4.4. You can use this.attributes[ 'class' ] prior to that version.