CKEditor for Drupal 7 Tips and Tricks (Open Source Version)

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

The following page lists a few tricks that you can use to make your CKEditor experience in Drupal even better than before.

Adjusting CKEditor to Your Theme

When using a custom theme, sometimes it is necessary to tell CKEditor to use the correct style. Let us use the Marinelli theme as an example.

By default, it is hard to create a page with CKEditor when using this theme since the background color used by the site and the editor font color are too similar. It is very hard to read anything and the text is aligned to the center:

Default CKEditor settings used in the Marinelli theme

Fortunately, there is a way to tell CKEditor to appear just like you would expect.

Take a look at the source of the Marinelli template (you may use Firefox with Firebug to do that). The ID of main element is primary. The class is named singlepage. All you need to do is tell CKEditor to use these styles.

Go to the Administration panel > Configuration > Content Authoring > CKEditor section and open the CKEditor profile that you want to configure. Go to the CSS section and choose the Use theme CSS option for the Editor CSS setting.

Open the site/all/modules/ckeditor/ckeditor.config.js file and add the following code:

config.bodyClass = 'singlepage';
config.bodyId = 'primary';

As a result, the body element inside CKEditor will get the right ID.

However, the background will still be wrong as will be the text alignment. To fix this, add another line of code inside the ckeditor.config.js file:

config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";

Since lists also do not look nice by default, you can add some margin:

config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";

(see in Firebug how the styles for lists are defined in the Marinelli theme to understand the problem)

important note

Remember to clear your browser cache after applying changes to JavaScript files as otherwise the changes might not be visible.

You can see the final result in the image below.

CKEditor settings used in the Marinelli theme

Please note that necessary changes for the Marinelli theme are already available in the ckeditor.config.js file. They can be taken as an example.

This page was last edited on 30 May 2012, at 10:33.