Blog (view all)

The purpose of this recipe is to turn over a WYSIWYG editor that the client will understand better. They will be able to visually see the different header and block styles before they select them. They will also see the styles applied within the WYSIWYG editor before they save their content.

There are a lot of changes to follow, which is why we have created this recipe. We try to be as systematic as possible when implementing this so more time is focused on the custom styles rather than the setup.

MODULES & FILES

This recipe uses the CKEditor Module and the IMCE Module to handle inline images. We will also list additional files that we use for some extra features.

• Download CKEditor Module. Extract and upload to sites/all/modules
• Download IMCE Module. Extract and upload to sites/all/modules
• Download CKEditor library. Extract and upload to sites/all/libraries

COPY

Copying certain files from the CKEditor module will give you the ability to customize the display at the theme level (where it should be).

• Copy sites/all/modules/contrib/ckeditor/ckeditor.styles.js to sites/all/themes/YOURTHEME/js/ckeditor.styles.js
• Copy sites/all/modules/contrib/ckeditor/ckeditor.css to sites/all/themes/YOURTHEME/css/editor.css

ckeditor.styles.js - This file allows you to customize the options in the "Styles" dropdown within your WYSIWYG editor.

editor.css - this file MUST be named differntly than the original (ckeditor.css) file. For some reason it will not use your new styles if it maintains the same name as the Modules's stylesheet.

 CONFIGURE

Go to admin/build/modules and enable the CKEditor and IMCE modules.

• Set CKEditor Permissions at admin/user/permissions (some one has to have access to use this!)
• Create IMCE Profile - We use IMCE to handle our image uploading. This is a step that can be easily overlooked. Find this at admin/settings/imce
• Edit CKEditor Default Settings at admin/settings/ckeditor
  
  • In Basic, set allowed permissions
  • In Editor Appearance, set Drupal Basic Toolbar
  • In CSS
    
    • Set Define CSS to %t/css/editor.css - this references the style sheet you copied to your theme.
    • Set Define path to ckeditor.styles.js to %t/js/ckeditor.styles.js
  • In File Browsers Settings, set File Browser Type to IMCE
  • Save your settings

FILE EDITS

The rest of the configurations will come from editing the code. Up until this point, we have set up our configurations to reference our style javascript and our style sheet within our theme.

INFO FILE

This is just to ensure that your theme is loading your javascript file. Some times I have found that this is not necessary, other times this file will not load until it has been added here. Add the following line to ensure that your theme uses the new styles:

scripts[]    = js/ckeditor.styles.js

Note: I have noticed that adding the ckeditor.config.js file in this manner will not always overwrite the file in the CKEditor module. I will show you later on how this file will be edited and backed up in case of an over-write when updating the module.

CONFIG FILE

These changes take place in sites/all/modules/ckeditor/ckeditor.config.js - BEFORE making these changes, I recommend copying this file and renaming it to .old.ckeditor.config.js in case you need to revert to or reference the original file. I have listed the line number of the changes as well.

Set Drupal Basic Fields - Here I have added the Styles Drop-down so they can select different "Box" styles like shown in the image below (the bold text has been added):
59  config.toolbar_DrupalBasic = [ [ 'Format', 'Styles', '-', 'Bold', 'Italic', '-',     'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];

Set the editor's body ID/class - I have found that adding both makes it easier to create a more specific body style that will over-write the default body styles. Fore example (bold is the added text):
105    config.bodyClass = 'editor-body';
106    config.bodyId = 'editor';

NOTE: There is also an option for using CKEditor's Media Embed feature. This is fairly simple to add, you can find instructions on how to do this in the README.txt file within the CKEditor module. This makes it easy to embed media inline within the WYSIWYG editor.

After making these changes and saving them, I recommend copying this file to your theme. This will make it easy to copy from your theme back to the CKEditor module if you want to use it on another site, but will also serve as a backup if you ever update your CKEditor module and lose your changes.

*Be Sure to clear your browser cache in between any of these changes! Otherwise you will not see the changes.

STYLES FILE

For the changes of what you see in the above graphic, I have commented out lines 31-32, and 46-67. This removes all of the default styles. To add my own styles, I begin at line 69 (just above the Image Object Styles) and create lines like this:

    {
        name : 'Green Box',
        element : 'div',
        attributes :
        {
            'class' : 'green-box'
        }
    },   

This uses the minium amount of code, to simply give this style a name, wrap the highlighted element in a 'div', and give it a class of 'green-box'. The CSS will take care of all the styles from there.

While I am here, I often edit the Style and Border attributes in the image object styles to remove the border and add the proper padding/margins needed for floating images to match my theme.
 

CSS 

In the editor.css file you have created, make sure that you apply 2 classes to all of your styles. This will make sure that you are styling the Format Drop-down as well as the editing area. Using the body ID/class I have created above, if I wanted to style the H1 tags, I would use these selectors:

Body Area: #editor.editor-body h1
Format/Style Drop-down: .cke_panel_listItem h1

So the final style to match the graphic above looks like this:

body.cke_show_borders h1, .cke_panel_listItem h1 {
    font: 600 normal 32px/32px Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
    color: #ea6d20;
    margin: 0 0 25px 0;
}

Some additional changes that you might consider include adding a DrupalBreak, Using CKEditor's IMCE button in place of the image button with the Image Resize Filter (since the image float can be applied with a style), and the Media Embed in place of EMField.

Although this is a long written process, you can make these changes in less than 10 minutes when you know where you are going and what changes are being made. I have found that this recipe gives me the control I need to customize the WYSIWYG Editor for our clients. If you have found an easier approach or have found a gliche in the steps I have created, we hope you will leave a comment and let the world know!