Adding custom CKEditor styles & getting them to show

It can be useful to add custom styles to your CKEditor WYSIWYG styles dropdown. For instance your content editors could use preset styles to make links to look like buttons, or add fancy borders to embedded images. Below are the steps to set this up:

1) Copy the ckeditor.styles.js file

Find the ckeditor.styles.js file - it's usually at a location like /sites/all/modules/ckeditor/ckeditor.styles.js

Once you have found the file either copy it into the root of your theme or a custom location. Personally I use a core theme for admin/editing, so I copy the file to a location outside of the core files within my actual theme folder, eg. /sites/all/themes/MYTHEME/js/ckeditor.styles.js

2) Add your custom styles

Open your copy of the ckeditor.styles.js file and you will see the existing styles. You can comment out some of these if you want, and add your own. Below are a couple of examples of how to add inline styles or classes.

/* adding a div with a class */
{ 
    name : 'Custom button', 
    element : 'div',
    attributes : { 
        'class' : 'standardBut' 
    }
},

/* adding some styles to an image */
​{
    name : 'Image on Left',
    element : 'img',
    attributes :
    {
        'style' : 'padding: 5px; margin-right: 5px',
        'border' : '2',
        'align' : 'left'
    }
},

3) Configure CKEditor to use your custom ckeditor.styles.js file

To get the WYSIWYG using your custom styles file go to Configuration > Content Authoring > CKEditor (/admin/config/content/ckeditor), and edit the relevant profile.

In the CSS settings area you need to change the Predefined styles dropdown to either:

  • Use theme ckeditor.style.js - if you've placed the file in the root of your themes folder
  • Define path to ckeditor.styles.js - if you have placed your file in a custom location (like I do). If you select this option you will need to put the path to the file in the Predefined styles path field (as shown below).
    Make sure you include the / a the beginning of the path otherwise it won't work!

Configuring CKEditor to use custom styles

4) Problems with caching and styles not showing in CKEditor

So you've done all of the above and your styles don't show in the styles dropdown, or update when you change them? 

This is a common problem that doesn't seem to be fixed by clearing your site or browser cache. The best workaround I've come across is to use the Define path to ckeditor.styles.js option, and then in the Predefined styles path field add a query string to the file which you update after each change.

For instance if the path to my file is: 
/sites/all/themes/mytheme/js/ckeditor.styles.js

Set the path to:
/sites/all/themes/mytheme/js/ckeditor.styles.js?v1

If the styles file is changed update the path to:
/sites/all/themes/mytheme/js/ckeditor.styles.js?v2

 

Justin Chevallier

Justin Chevallier

Avid Drupal site builder & user for +10 years.

Comments

Submitted by Simon on

Thank you for that awesome step 4. I was going out of my MIND trying to get my additional classes to show up.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.