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!
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:
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:
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:
What's going on? Well, the solution is easy, once you know it!
CKEDITOR.stylesSet.add( 'default', [
CKEDITOR.stylesSet.add( 'drupal', [