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 ) {

      // 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.

2 Answers 2


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",

  • I've been through sdk guide and also the existing plugin you suggested and none of them show how to add a class. May 31, 2015 at 9:18
  • I edited my answer.
    – No Sssweat
    May 31, 2015 at 21:49
  • edited again =)
    – No Sssweat
    May 31, 2015 at 23:22
  • This is not suitable as I'm already using the image2 plugin and the image2_alignClasses functionality to control the classes used by left and right alignment. Additionally I'm also loading the editor from CDN and don't have those local plugins Jun 8, 2015 at 13:35

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;
  • It's a possibility, but with over 10 content types, BEAN and panels there is a lot of places this needs to be added. May 31, 2015 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.