Using CKEditor Styles in Drupal

For a recent project, we’ve been trying to find an easy way of allowing our client’s staff members to create and edit content using a WYSIWYG editor. However, they also wanted a fair degree of control over the layout of the content, without using any html editing. To achieve this, we decided to create a solution inside the WYSIWYG editor in order to keep the user interface as simple as possible. The editor we were using for this project was ckeditor 4.4.3.

Our initial thought was to use a plugin called htmlbuttons. This plugin, in theory, allows developers to create custom buttons inside ckeditor which the client can use to insert pre-written html snippets. We could therefore have had buttons allowing them to easily set up an image grid, or a box with a caption, or a table, and all they would have had to do was replace the content they could see, without fiddling with the HTML itself. On paper, this would have been an ideal solution, but the plugin seemed to have compatibility issues with Drupal 7, and after numerous experiments with it we were back to the drawing board. However, it is definitely an option that we would consider using in the future if these compatibility issues could be solved.

What we ended up doing was creating some preset object styles inside ckeditor to achieve our aims. The first step was to enable this by configuring the ckeditor toolbar to include the ‘styles’ dropdown, which is hidden by default. Next, we had to copy the ckeditor.styles.js file from the contrib module to the theme directory in order to keep the styles in place when the ckeditor module is updated. Drupal also has to be informed that it needs to look for the styles.js file in the theme directory; this can be configured inside the ckeditor’s css settings.

The object styles themselves are located towards the bottom of the styles.js file. They operate using the following format:

/* Object Styles */
{
  name : 'Left Image',
  element : 'div',
  attributes : {
    'class' : 'alpha grid-3 image-grid-caption'
  }
}

In this case, we wanted to apply grid styles to a div which the user can insert an image into. To do this, we’ve set up a css class called ‘image-grid-caption’ and applied that, along with the omega theme grid-system classes, to achieve the desired layout. The user can select the style ‘Left Image’ from the styles menu inside ckeditor and apply it to the image they want on the left of a grid.

So far so good. The style left image appeared as expected in the styles menu when we edited some content in the ckeditor. However, when we subsequently added some further object styles, they did not make themselves known to ckeditor. This left us somewhat confused. Fortunately, a quick scour of the internet turned up this article, which revealed that drupal had a caching problem whereby only the first change made to the styles.js file is registered. The article suggests using a cachebuster string at the end of a manually defined path to the version of styles.js which is in the theme directory, for example %t/ckeditor.styles.js?v3 where %t is the path to the theme. You have to remember to change the version number every time you make a change to styles.js, but at least it works. So thanks to Chip Cullen!