How To Set Up the CKEditor Module In Drupal

CKEditor is one of the contributed modules for Drupal, but is maintained on its out external open source website.

This tutorial will instruct you how to setup the CKEditor module. The only thing you need to have done prior to setup is to install Drupal.

Readers of the book "Using Drupal" by O'Reilly may find this tutorial as a helpful update to the text in chapter 2. The section "Hands-On: Setting Up FCKeditor" on pages 82 to 89 is outdated, because the FCKeditor module has been replaced by CKEditor.

1. Go to http://drupal.org/project/ckeditor. Make sure your Drupal core is up-to-date with this version (update it if not, before going any further). Download the latest version of the CKEditor module under "recommended releases" to your desktop.

2. Upload this file to your server's Drupal module folder (sites/all/modules). Extract the contents and you will be presented with a new folder named "ckeditor".

3. Go to http://ckeditor.com/download. You can download the zip or tar.gz file here. Either will be the most current version of the CKEditor software you will need.

4. Upload this file to "sites/all/modules/ckeditor/ckeditor". Extract the contents and you will be presented with another new folder named "ckeditor" with the software files.

5. We'll also want to use the IMCE module which can be downloaded from http://drupal.org/project/imce. Upload this file to your server's Drupal module folder (sites/all/modules). Extract the contents and you will be presented with a new folder named "imce".

6. Now enable the CKEditor and IMCE modules by going to your Drupal site, Administer > Site building > Modules.

7. Now setup the permissions at Administer > User management > Permissions, as follows. For "access ckeditor", allow permissions to user roles who you would like to have access to the CKEditor (perhaps editor and site administrator). For "administer ckeditor", allow permission to site administrator user roles only.

8. User 1 is the initial user account created when you setup Drupal. Though this account normally has all privileges, the CKEditor module works only by user roles. By default, the User 1 account only has the "authenticated user" role enabled. You will need to enable this account with the site administrator role(s) by choosing it at "My Account" and check the appropriate role.

9. Adjust the settings in CKEditor. Go to Administer > Site Configuration > CKEditor. Go to the Advanced profile. Under Basic setup, the roles allowed to use this profile should be checked for editors and site administrator roles only. Under File browser settings, choose IMCE. Click save when done.

10. Adjust the input format for Full HTML. Go to Administer > Site Configuration > Input format. Click configure for Full HTML. As a default, no roles are selected. Choose the names for those roles you want to use Full HTML (such as "editor" and "site administrator"). Save configuration.

11. Adjust the input format for Filtered HTML. Go to Administer > Site Configuration > Input format. Click configure for Filtered HTML. Here, all the roles are selected, but we will configure this format instead of editing it. Click configure next the the "Filtered HTML" text. Under Allowed HTML tags, add the following tags at the end of the last tag, separated by a single space: <img> <div> <pre> <address> <h1> <h2> <h3> <h4> <h5> <h6>. Save configuration.

12. Setup IMCE. Go to Administer > Site Configuration > IMCE. Click the edit link next to User-1. Rename the "User-1" profile name to "Advanced" to match the CKEditor profile name. This will help you see how the terms relate, but does nothing for the functionality. Change the Maximum image resolution to 800x600. The default of 1200x1200 is not recommended as it could be larger than the screen layout for some users. Save configuration.

13. Go back to Administer > Site Configuration > IMCE. Now click the edit link next to Sample. Rename the "Sample" profile name to "Default" to match the CKEditor profile name. Again, this will help you see how the terms relate, but does nothing for the functionality. Everything else can stay the same. Save configuration.

14. One last time, go back to Administer > Site Configuration > IMCE. We will finish by assigning our users to their roles. Under the Role-profile assignments section, choose Advanced for any editor or administrator role. Then choose Default for the authenticated user role. Save configuration. You are done.