FCKeditor and IMCE Tutorial

IMCE and FCKeditor work well together in providing the user a WYSIWYG (What You See Is What You Get) editor type interface. IMCE is an image up-loader and allows users to utilize images in their posts. In this tutorial you will learn the basic process of installing, enabling and configuring these modules for your site.

Download IMCE and FCKeditor Modules

1. Download IMCE from Drupal modules. Extract/copy the IMCE module into your sites/all/modules folder. (Be sure to take the time to read the IMCE documentation.)

2. Download FCKeditor from Drupal modules. Extract/copy the FCKeditor module into your sites/all/modules folder. (Be sure to take the time to read the FCKeditor documentation.)

3. Go to http://ckeditor.com/download and click the download link. See image below.

4. Download and extract the file and you will a folder call fckeditor.

5. Copy this fckeditor folder and paste it into your FCKeditor module folder. The structure should look like the following sites/all/modules/fckeditor/fckeditior.

Enable FCKeditor and IMCE Modules

1. Go to Administer > Site Building > Modules and enable FCKeditor and IMCE and save configurations.

2. Go to Administer > User Management > Permissions and check off permissions and save premissions. The premission you grant depends of the roles you have established for your site. Here is an example.

Configure FCKeditor

1. Go to Administer > Site Configuration > FCKeditor Settings. Click the "edit" link next to the default profile. 

2. Under Basic Setup check the roles that you would like the Default profiles to apply to.

3. Under CSS choose the CSS editor theme for the FCKeditior.

4. Under File Browser Settings choose IMCE from the File Browser type drop down menu.

5. Once you click on Update Profile, you will be brought back to the FCKeditor Settings page and the roles you choose in step 2 will appear next to the Default Profile.

6.  Go to Administer > Site Configuration > FCKeditor Settings. Click the "edit" link next to the Advanced profile. 

7. Under Basic Setup check the roles that you would like the Advance profiles to apply to. 

8. Under CSS choose the CSS editor theme for the FCKeditior.

9. Under File Browser Settings choose IMCE from the File Browser type drop down menu.

10. Once you click on Update Profile, you will be brought back to the FCKeditor Settings page and the roles you choose in step 7 will appear next to the Advance Profile.

Modify Input Formats

Input Formats are restricted by roles. It is not a good idea to give your users Full HTML. Full HTML should be limited to your most trusted users, such as editors of your site's content or site administrators.

Utilizing Filtered HTML can save your site from being hacked. The default tags for Filtered HTML is limited. You will want to consider modifying your Filtered HTML to include some additional tags.

1. Go to Administer > Site Configuration > Input Formats and click on configure next to Filtered HTML.

Then click on the configure tab.

2. Under "Allowed HTML tags" add the additonal tags. For example, add <h1><h2><h3><h4><h5><h6><img>. Save your configuration.

3. Go to Administer > Site Configuration > Input Formats and click on configure next to Full HTML.

4. Check editor in Roles and save the your configuration.

5. Editor will not be listed next to Full HTML in the Input Formats page.

 The FCKeditor for anonymous and authenticated users will display Filtered HTML.

 The FCKeditor for editors will display Full HTML.

Configure IMCE

1. Go to Administer > Site Configuration >IMCE. Click the "edit" link next to the User-1 profile. User-1 is meant for User 1 which is the admin role when the site was first established. This IMCE profile is therefore suitable for any adminstrative user roles established for your site.

2. Change the Profile name to advance to match the FCKeditor profile.

3. Under Maximum Image resolution change the size to meet the needs of your site. For example the content area of the nodes of my site should not exceed 640px. I changed the Maximum Image resolution to 640x480. Then click on save configuration.

4. Go to Administer > Site Configuration >IMCE. Click the "edit" link next to the Sample profile.

5. Change the profile name to Default to match the FCKeditor profile.

6. Under Maximum Image resolution change the size to match the settings you established above.

7. Go to Administer > Site Configuration >IMCE under Role-profile assignments assign the IMCE profile to the appropriate role.

You are done!