Automatically add class to images added through CKEditor

Question

I'm trying to add classes automatically to images which are added through CKEditor, I have spent considerable time trying to research this and found How to add class or attribute automatically to img tags in CKEditor? & Create new dom elements using dataProcessor.htmlFilter which hint at solutions that I can't get working.

I'm using the CKEditor module rather than WYSIWYG and found it's possible to add a new plugin using hook_ckeditor_plugin and my new plugin appears as a selectable option in the CKEditor admin, based on the 2 documents provided I managed to put together:

( function() {
  CKEDITOR.plugins.add('imageclass', {
    init : function( editor ) {
      var rules = {
        elements: {
          img: function( element ) {
            console.log(element);
          }
        }
      };

      // It's good to set both filters - dataFilter is used when loading data and htmlFilter when retrieving.
      editor.dataProcessor.htmlFilter.addRules( rules );
      editor.dataProcessor.dataFilter.addRules( rules );
    }
  });
})();

The problem is that nothing get's written to the console, I changed the line img: function( element ) { to $: function( element ) { which then writes all the elements at the root to the console, but all images, spans, etc. don't get written to the console as they are children of other elements (p, div, etc.) and I think this is something to do with the way CKEditor is integrated with Drupal and the options available via text formats.

I just don't understand enough about CKEditor and the documentation isn't easy to follow on how to move through more than just the elements at the root, unless trying to create this as a plugin is the wrong way to go.

Answer 1

Ok, I got the answer.

Forget about the simple image plugin. Let's use the default image plugin from CKeditor.

Go to sites/all/modules/ckeditor/ckeditor/plugins/image/dialogs

Open the image.js file in notepad.

Search for c.lang.common.cssClass beside it you should see a "default": "",

So just type your class in between the default quotes.

For Example: "default": "MyCustomClassName",

Answer 2

A workaround could be to give the fields which are using CKeditor a custom CSS class (e.g. ckfield, and define a class in your stylesheet in the likes of:

.ckfield img{
  max-width: 25%;
  margin: 15px;
}