Optimising your Drupal 7 CKEditor

Kirsty Bewley's picture
Jan 25th 2016Front-end Developer

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.

Microserve's picture

You may also like...

Drupal Migration Tips

Microserve, Nov 6th 2015
Credit: This blog post was written by Oliver Davies during his time at Microserve. As part of our recent work on road.cc , we performed a large data...

Comments

Wim Leers

Jan 25th 2016 - 4:01pmreply
Wim Leers's picture

Please update this article to explicitly state it covers Drupal 7 plus https://www.drupal.org/project/ckeditor. Not Drupal 8, which already does all of these things and much more by default.

Rick Donohoe

Jan 26th 2016 - 10:01amreply
Rick Donohoe's picture

Great spot Wim, thanks for commenting.

Michel

Jan 29th 2016 - 1:01pmreply
Michel's picture

Hi,
nice to make this kind of rules popular.

You wrote :
"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. "

I'm looking for this Ckeditor plugin since a long time. It seams it only exists for the Wysiwyg module.
How do you use it in the Ckeditor used thanks to the Ckeditor Drupal module ?

Kirsty Bewley

Feb 1st 2016 - 5:02pmreply
Kirsty Bewley's picture

Hi Michel, thanks for the comment!

Ckeditor for drupal, I've always used the full package from ckeditor, version 4 (http://ckeditor.com/download) via cdn. This is the plugin to add on if not. http://ckeditor.com/addon/templates.

 

This is the button above. It just needs to be added to the toolbar. It usually comes with predefined templates but you can make custom templates too.

To do this you can copy ckeditor.config.js from the folder to your theme folder then add config.templates_files = [ Drupal.settings.basePath + 'sites/all/themes/THEME/templates.js’ ]; under config options. Then enable ‘Load ckeditor.config.js from the theme path’.

Add the js file which the above points to and add & change:

CKEDITOR.addTemplates( 'default',{
    // The name of the subfolder that contains the preview images of the templates. Optional
    imagesPath: CKEDITOR.getUrl('/sites/all/themes/custom/ckeditor/images/'),
    // Template definitions.
    
  templates :
    [
        {
            title: 'A Title',
            image: 'icon.png',
            description: 'Heading & text',
            html:
            '<div class="clearfix"><div class="div" >' +
                '<div class="text">' +
                    '<h2>Heading</h2>' +
                    '<p>Text</p>' +
            '</div></div></div>'
        },
        {
            title: '2 Columns',
            html:
            '<html code>'
        }
    ]
});

Browser caches may need to be cleared.

Hope this is of some use.

Thanks. 

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.

Related Blogs

Sophie Shanahan-Kluth's picture
Mark Pavlitski's picture
Rick Donohoe's picture