Overriding the styles combo in CKEditor

CKEditor is a superb WYSIWYG text editor and when used together with the CKEditor module for Drupal, it's a great solution for enabling editors to easily add HTML to content. A common issue site builders seems to have is changing the list of styles that are available in the Styles drop down combo. Here's a salient tip for getting it working!

Photo of Chris Maiden
Fri, 2015-11-27 07:26By chris

CKEditor comes with a Styles drop down combo that enables editors to select some text and then decorate it by selecting from a list of available styles:

Screenshot of CKEditor showing Styles drop down

 

These styles might be everything you need in which case, you're home and dry!

In my case, I wanted editors to be able to pick from just the following styles: paragraph, heading 3 through heading 6. That's all.

The method for customising the styles presented in the drop down combo is to copy the ckeditor.styles.js (or styles.js) file from the CKEditor library to your theme (or somewhere else) and to configure the Drupal CKEditor profile settings to pick up the new file:

Screenshot showing CKEditor profile set to use styles from the theme

 

If you, like me, have taken the styles.js file from the CKEditor library itself (CKEditor version 4.5.4) and have placed this in your theme directory, you might have got the following blank styles drop down:

Screenshot showing the blank styles dropdown

 

What's going on? Well, the solution is easy, once you know it!

All that is needed is to edit the JavaScript file you've copied to your theme and change the following line:

CKEDITOR.stylesSet.add( 'default', [

to

CKEDITOR.stylesSet.add( 'drupal', [

and that's it. Oh, you might need to clear your browser cache or alternatively append a query string to the JavaScript file to bust the browser cache and that is actually it!