Overriding styles combo in CKEditor
Overriding styles combo in CKEditor
Language
English
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!
Sat, 2015-10-24 12: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:
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!
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!
How do I roll back a bad build?FAQ
WhatTalent AlphaBlog
More On Deploying With JMeter - Shell Scripting DeploymentBlog