Optimising your Drupal CKEditorJan 25th 2016
Configuring CKEditor

First rule to configure your WYSIWYG's:  Only give your users what they need.

When you install CKEditor it gives you almost every option in the toolbar. This is fine for an admin who knows what they do and how to use them, but for most users they are going to be overwhelmed or they can go too over the top with the formatting options, which can result in some ugly looking content on the website. 

Below is a configured CKEditor for a full profile using the full html text format. (…/admin/config/content/ckeditor/edit/Full). This would generally be used for site admins and editors. You can setup different CKEditor profiles and text formats for different users according to what you need. 

Here's a couple of useful buttons to use:

• Format: I don’t know why you wouldn’t have this set! It gives the option to have headings or paragraphs etc. What you should always do is change the font formats under ‘CLEANUP AND OUTPUT’ and take out H1. It is a nightmare if the client gets a hold of that! You only want one H1 tag on your page and that tends to be the node title. Any more than this is bad for SEO.
• Remove Format: This removes inline styling which usually happens when pasting text into the editor. They're are ways to add paste filters to strip out html you do and don't want.
• Full page/Maximize: I just prefer this for myself really. I find the text area constraining and I like seeing the bigger picture without extending the box or scrolling a lot. There is an auto grow plugin or you can manually set the editors height in the settings config file.
• Link: I use a plugin module to easily link to internal paths called CKEditor link.
• Div: To add a div wrapper. This is handy because it keeps div classes/ids when saved as full html, also when using templates and custom styles.
• Show blocks: Adds an outline to each element with their tag displayed next to them.
• Templates: Gives the ability to add custom code into your editor. For example: If you want to add a two column layout with images you can write a template file for this and select it here. 
• Styles: Gives the ability to create custom styles for your text editor. Such as, give a p tag a certain class to style differently.

Advanced content filter -

I would recommend enabling the Advanced content filter (ACF). This cleans up and strips out unwanted html such as inline styling, font styles, scripts or risky code and converts b tags to strong tags etc. However, if you did want something like text colors on all elements or the use of spans. Add this code :

config.extraAllowedContent = 'span;*{color}';

to 'Custom JavaScript configuration' under 'Advanced options' at the bottom of settings page. Alternatively, you can load CKEditor.config.js from your theme directory (remember to clear the browsers cache when using this file).

The above option is per CKE profile. See here about ACF and other samples.

If you have any examples or other ways you filter HTML I would be interested to hear them - simply leave a comment at the end of the post!

Theming CKE contents

As an option you can load your theme's CSS into the CKE body. This helps your users see how it will look on without having to preview the page. 

This is quite simple:

Under CSS in the profile settings, there are three options - 'CKEditor default', 'Use theme CSS' or 'Define CSS'. You can only use the theme CSS if you are using plain CSS for your site, as this doesn't work with SASS/LESS etc. The other option is to define the CSS and write some custom CSS for the editor itself. So, if I have a CSS file in my theme directory under - /sites/all/themes/custom_theme/css/editor.css then the path to the CSS file would be - %h%tcss/editor.css .

NOTE: The styles you write in this CSS file will not apply to the rest of the site unless it's added in the themes .info file.

Finally, images! Using the Picture module you can ask users to set an image style when inserting a new image into the editor. This will mean the content editor can't insert images that are just too big for what they need to be.

Written by: Kirsty Bewley, Front-end Developer

Microserve is a Drupal Agency based in Bristol, UK. We specialise in Drupal Development, Drupal Site Audits and Health Checks, and Drupal Support and Maintenance. Contact us for for further information.