Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Adding Your Theme Classes to CKEditor

Parent Feed: 

WYSIWYG editors are the bane of my existence, yet they are a necessary evil if you have clients that want to edit their site content.

But somewhere between all the inline styles they create to editing source code, there simply had to be a solution that would let me open up my theme css to content creators. 

After much searching and testing, I have found that unicorn. 

CKEditor populates the style drop down menu with a js file, and it lets you override it. Problem is, as stated in the docs, it doesn't work. And there were a few various options posted in the CKEditor module issue queue. 

First off, you create a new js file to name a function that will build the drop down select items and the parameters for each. Contrary to what has been suggested in various posts, I put this in my theme's js folder. That way it won't get overridden by a module or library update, and it just makes sense since it's tied to my theme. Only CKEditor will be looking for this file, so there's no need to call it in your template files nor add it to your .info file. 

For example, I created a file named ckeditor_styles.js like so:
 

( function() {
    CKEDITOR.stylesSet.add( 'my_styles', [ // this is the styles set name you will call later
        { name: 'Teal Heading 2', element: 'h2', attributes: { 'class': 'teal' } }, 
        { name: 'Teal Text', element: 'span', attributes: { 'class': 'teal' } },
        { name: 'Unbold Heading', element: 'span', attributes: { 'class': 'unbold' } }
    ]);
} )();

It's pretty straightforward. The name parameter is what you will actually select in the drop down. The element is where you specify where to inject the class. If it's a block-level element (h1, h2, div, p, etc.), the class will added. If it's a span, then the selected text will be wrapped in a classed span. As for attributes, that's where you specify you are calling a class, and also provide the name of the class you want to inject. The resulting drop down will be split into block styles and inline styles.

The second step is to let CKEditor know where to find this file, via the advanced options section in the configuration. Navigate to admin/config/content/ckeditor and edit the profile you wish to add this to, most likely Full HTML. Docs will say you only need to set config.stylesSet, but as gleaned from the issue queues (and tested personally), you need to also set config.stylesCombo_styleSet.

Expand the Advanced Options field set and add the following to the Custom JavaScript Configuration with your styles set name and the path to your js file:

config.stylesCombo_stylesSet = 'my_styles:/sites/all/themes/mytheme/js/ckeditor_styles.js';
config.stylesSet = 'my_styles:/sites/all/themes/mytheme/js/ckeditor_styles.js';

Clear your caches and you should now be able to pick styles from your drop downs that will add either standard elements or spans with the desired classes. 

Sources:
http://docs.ckeditor.com/#!/guide/dev_howtos_styles
https://www.drupal.org/node/1287432

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web