ImageToolbar Configuration

Image Toolbar for CKEditor

Configuration

The configuration is defined on an "imagetoolbar" object and it currently has 2 items:

The first item is the set of buttons that will be available in the toolbar. It's defined as an array (toolbar) of arrays (groups). These groups arrays include each toolbar item that you want to provide.

A toolbar item is defined by several properties:

The name
The class that you want to toggle on the image
The optional title that will be shown as a tooltip. If it isn't specified it will try to load it from the lang file
An optional entry to define it as a justifyCommand so it toggles the matching Justify Command in the main toolbar
An optional icon entry with the path to the icon that you want to use. If you are building this plugin into your CKEditor, you can place all your icons in the /icons/ subfolder of this plugin (as .png) and name each icon with the same value used for the "name" of the item
An optional dontCheck to indicate that this item shouldn't be checked with regards to the current stylesheet and always be shown

// Configuration for ImageToolbar
config.imagetoolbar = {};
config.imagetoolbar.classes = [
   [
       { name: 'imageleft', 'class':'izda', title:'A la izquierda', justifyCommand:'justifyleft' },
       { name: 'imagecenter', 'class':'centro', title:'Centrada', justifyCommand:'justifycenter' },
       { name: 'imageright', 'class':'dcha', title:'A la derecha', justifyCommand:'justifyright' },
       { name: 'imageinside', 'class':'inline', title:'En linea', justifyCommand:'justifynone' }
   ],
   [
       { name: 'imageborder', 'class':'borde', title:'Con Borde' }
   ],
   [
       { name: 'imageshadow', 'class':'sombra', title:'Con Sombra' }
   ],
   [
       { name: 'nomobile', 'class':'no-mobile', title:'No Mostrar en móvil' }
   ]
];

Each group of items act as a set of radio buttons: when you click one the rest of items in the same group gets turned off, but it doesn't affect other groups.

The user can toggle a button on each group if they like it that way, so the image ends up with multiple classes

The second configuration item is the toolbar items that you want to use. By default the toolbar is generated automatically based on the classes that you have defined but if you want to add some extra item or do any other change, this entry allows you to do it. It just follows the same structure than the main CKEditor toolbar:

// Configuration for ImageToolbar
config.imagetoolbar = {};
config.imagetoolbar.toolbar = [['imageleft','imagecenter','imageright'],['Image', 'ImageCrop']];

The items are automatically validated with regards to the current stylesheets, so you can add as many items as you need and they will be hidden if its class isn't present for this document, so you can reuse the same configuration of items and icons even if you're editing different types of documents (homepage, news, mailings, ...). If you want to allow some item even if the class isn't detected you can add the "dontCheck: true" property to that item.

Remember that you have to add the classes to you stylesheet, these are the ones used on our example, but you can use whatever you need, there are no restrictions:

img.izda {
   float: left;
   margin: 0 7px 3px 0;
}

img.dcha {
   float: right;
   margin: 0 0 3px 7px;
}

img.centro {
   display: block;
   margin: 0 auto 3px;
}

.borde {
   border: 1px solid #666;
}

.sombra {
   box-shadow: 2px 2px 6px 3px #cbcbcb;
}

.rounded {
    border-radius:10px;
}

.ellipse {
   border-radius:50%;
}

As you can see, it's valid if you either use img.class or just .class rules.

You may find interesting to read more about Styling images with Classes in CKEditor.

If you have any question, please contact us.