Adding Classes to the CKEditor Styles Dropdown List [Drupal 7]

Drupal Version

If you want your editors to be able to easily apply your custom CSS classes via the Styles drop-down list in the GT Editor:

  1. Copy the js/ckeditor.styles.js file from the GT Theme (version 7.x-2.2 and above) into your subtheme folder.
  2. Add your own CSS styles to this file. The CKEditor documentation explains how this works.
  3. Go to Configuration -> Content authoring -> CKEditor
  4. Select the Edit link under the OPERATIONS row for the appropriate CKEditor profile (advanced, basic, etc.)
  5. Under the CSS accordion fieldset change the Predefined styles drop-down to "Use theme ckeditor.styles.js"
  6. Flush your browser's caches to get CKEditor to pick up the new file.  You'll need to flush your browser's caches each time you update this file.

If you'd rather not rely on users caches expiring or telling them to flush their caches, you can use another technique to specify your styles file:

  1. Go to Configuration -> Content authoring -> CKEditor
  2. Select the Edit link under the OPERATIONS row for the appropriate CKEditor profile (advanced, basic, etc.)
  3. Under the CSS accordion fieldset change the Predefined styles drop-down to "Define path to ckeditor.styles.js"
  4. Set the Predefined styles path to point to your custom styles file.  Add "?v=XXX" where XXX is some random value.  Change this value each time you make changes to your styles file.  This change will trigger web browsers to consider the file to be updated and to ignore the version held in the browser cache.

NOTE: If you implement a custom ckeditor.styles.js file,  you'll need to remember to integrate into this file any changes to the standard styles introduced by any newer version of the GT Theme.