Drupal CKEditor Custom Text Styles

Usually you should be able to add the ‘Styles’ button to your prefered CKEditor Profile by drag’n’drup in the ‘appearance’ section of the corresponding CKEditor profile. Then you could customize the ckeditor.styles.js which should be located in sites/all/mytheme/ckeditor.styles.js –– BUT there is an incompatibility between jQuery and the CKEditor Profile editor.

So in order to get this work, first jQuery has to be ‘downgraded’ to V.1.7, preferably  through jQuery update. This of course makes the whole idea of having a module called “jQuery update” appear to be a bit strange – but that’s how it seems to be. At the moment.

Once jQuery is downgraded, the CKEditor profile editor works. That let’s you drag’n’drop the ‘Styles’ button into the interface. And that again makes use of the ckeditor.styles.js which can then be adjusted according to personal preferences.

If the custom styles still don’t show up then “flush all caches” may help. Also clearing browser cache is recommended since the JavaScript files involved can be a bit sticky.

Leave a Reply

Your email address will not be published. Required fields are marked *