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 posts that mention dataProcessor but have no idea which file this should be added or how to do it.

Can someone tell me where I would place the following code?

editor.dataProcessor.htmlFilter.addRules(
{
    elements:
    {
        img: function( element )
        {
            if ( !element.attributes.alt )
                element.attributes.alt = 'An image';
        }
    }
} );

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.

Answer 2

this worked for me in 3.6

add the following code to config.js

CKEDITOR.on('dialogDefinition', function (ev) {
    // Take the dialog name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    // Check if the definition is image dialog window 
    if (dialogName == 'image') {
        // Get a reference to the "Advanced" tab.
        var advanced = dialogDefinition.getContents('advanced');

        // Set the default value CSS class       
        var styles = advanced.get('txtGenClass'); 
        styles['default'] = 'newsleft';
    }
});

Answer 3

Here's another approach:

CKEDITOR.on( 'instanceReady', function( evt ) {
  evt.editor.dataProcessor.htmlFilter.addRules( {
    elements: {
      img: function(el) {
        el.addClass('img-responsive');
      }
    }
  });
});

Answer 4

Because of this topic is being found in Google very high, I might help people by answering the question: how to add a default class when inserting an image in CKeditor. This answer is for CKeditor 4.5.1. as this is the latest version right now.

1. Look up image.js in /ckeditor/plugins/image/dialogs/image.js
2. Search for d.lang.common.cssClass
3. You will find: d.lang.common.cssClass,"default":""
4. Edit it with your class name(s) such as: d.lang.common.cssClass,"default":"img-responsive"

I've tried this and it works!

Answer 5

in Version: 4.5.3

1. Look up image.js in /ckeditor/plugins/image/dialogs/image.js
2. Search for editor.lang.common.cssClass
3. You will find: editor.lang.common.cssClass,"default":""
4. Edit it with your class name(s) such as: editor.lang.common.cssClass,"default":"your-class-name"