How to Install FCKeditor on Drupal

After some trouble lately getting everything working, I finally have the FCKeditor WYSIWYG editor installed and working on Drupal. The official documentation leaves a little to be desired, so it seems prudent to document and share what I had to do to make it work.

I’m using Drupal 6.2, the FCKeditor module 6.x-1.2-1, and FCKeditor 2.6.

Installation

1. Install Drupal

   See the Getting Started guide. Installing Drupal is beyond this scope of this tutorial.

2. Get the module

   Grab it from the FCKeditor project page. Unzip the files to the sites/all/modules directory.

3. Get FCKeditor

   The module plugs the editor into Drupal, so you still need to get the actual editor. Unzip the files to the sites/all/modules/fckeditor directory, creating an fckeditor directory inside of the fckeditor directory.

4. Enable the module

Configuration

1. Grant permissions

   Go to http://example.com/admin/user/permissions. The FCKeditor module permissions are pretty self explanatory. Just make sure that the user account you’re using to set this up has all of the permissions, and that you give appropriate permissions to any other roles that you want using the editor.

2. Adjust filters

   FCKeditor likely will create markup that will be stripped out by Drupals “Filtered HTML” filter. To adjust the filter, go to http://example.com/admin/settings/filters and configure that filter to allow the following tags: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <img /> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <strike> <caption>.

3. Customize the toolbars

   Out of the box, the toolbar is a little unweildy. I like to pare it down to the some of the more useful functions.

   

   To do this, edit the file sites/all/modules/fckeditor/fckeditor.config.js. The easiest option is to just revise one of the pre-existing toolbars defined in this file; I usually pick the “DrupalFiltered” toolbar. The following code will give you the toolbar pictured above:

   FCKConfig.ToolbarSets["DrupalFiltered"] = [
     ['Source', 'ShowBlocks'],
     ['Cut','Copy','Paste', '-','PasteText','PasteWord'],
     ['Undo','Redo','-','Replace','-','RemoveFormat'],
     '/',
     ['Link','Unlink','Anchor'],
     ['Image','Table','SpecialChar'],
     '/',
     ['FontFormat'],
     ['Bold','Italic','StrikeThrough'],
     ['OrderedList','UnorderedList','-','Blockquote'],
   ] ;

4. Setup profiles

   The FCKeditor module allows different profiles for different user roles. For a user to use the editor, that user’s role must be associated with a profile in addition to having the “access fckeditor” permission. Set up profiles at http://example.com/admin/settings/fckeditor.

   Edit the “Global Settings” to tell the module, first, the precedence of the roles for determining which profiles will be seen by users with multiple roles. Under “Visibility settings”, I highly recommend adding “admin/*” to “Paths to exclude”, so you don’t have WYSIWYG editors popping up in unexpected places in the administration screens.

   Next, select one of the profiles to edit.

   • Again, make sure that all roles that you want using the editor are selected under “Roles allowed to use this profile”.
   • Under “Editor appearance”, set the toolbar to the one you edited earlier (“DrupalFiltered”).
   • Depending on your users, you may want to limit the font formats under “Cleanup and output” to prevent the use of certain tags that don’t fit with your site’s style.
   • Things can sometimes get a little buggy if you let the editor try to apply your theme’s CSS to the editor display. You’re probably better off setting the editor CSS to “FCKeditor default” under “CSS” (or see the Tips & Tricks page for a way to fix it).
   • If you’re going to allow file uploads (which we’ll cover in a moment), make sure to enable file management (both basic and advanced) under “File browser settings”.

5. File uploads

   Out of the box, file uploads and the file browser don’t quite work.

   To enable the file browser, edit sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php. Find the line containing $Config['UserFilesAbsolutePath'] = '' ;. Add the following line after that:

   require_once "../../../../../filemanager.config.php";

   Then locate your Drupal settings file (probably at sites/default/settings.php). Uncomment the line with the $cookie_domain variable and set it to your site’s domain.

   Next, fix a bug to enable quick uploads. Edit sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/io.php, replacing the line that says var test = window.top.opener.document.domain ; with one that says var test = window.parent.OnUploadCompleted ;.

   The quick uploader, by default, puts all of its files in the directory above that which the file browser can access. To fix this, go back to sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php. Replace the following lines:

   $Config['QuickUploadPath']['File']         = $Config['UserFilesPath'] ;
   $Config['QuickUploadAbsolutePath']['File'] = $Config['UserFilesAbsolutePath'] ;

   with:

   $Config['QuickUploadPath']['File']         = $Config['UserFilesPath'] . 'file/' ;
   $Config['QuickUploadAbsolutePath']['File'] = ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'file/' ;

   Repeat three more times, for “Image”, “Flash”, and “Media”.

And there you have it: a fully operational installation of FCKeditor on Drupal.

Update (2009-02-18): If you followed the above instructions and you’re getting a short text box where you would expect to find FCKeditor, the problem might be with your theme. Open up page.tpl.php and look for the following line near the end:

< ?php print $closure; ?>

If you don’t see that, FCKeditor won’t work. Add that line, and you should have a bit more success.