CKeditor adding class to img tag

Question

I am trying to add a class to any inserted img tag in CKeditor. I have tried various ways but can't seem to figure out how the setting of this plugin works. Whilst there are tonnes of documents, it only mentions that a code needs to be added, but not where it should be added, there are loads of files.

I tried adding it to the bottom on config.js

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
    config.extraPlugins = 'confighelper';   

    config.stylesSet = 'my_styles';

};

CKEDITOR.stylesSet.add( 'my_styles', [

    { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);

That didn't work

So I tried adding it to the actual html page

<script>
CKEDITOR.stylesSet.add( 'my_styles', [

    { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
]);
</script>

That didn't work either

Reading their docs I can't make any sense of it http://docs.ckeditor.com/#!/guide/dev_howtos_styles

How does one add a class to any img tags added through the editor?

Answer 1

I'm not using CKEDITOR, but the problem could be, that the stylesSet is not declared on CKEDITOR call, since its defined later. Try moving CKEDITOR.stylesSet.add prior to editorConfig.

Alternatively put your styles into the first code block:

CKEDITOR.editorConfig = function( config ) {

   ...
   ...

   config.stylesSet = [
      { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}
   ];

};
</script>

There are also some more Docs about the usage http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-stylesSet