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.
See the Getting Started guide. Installing Drupal is beyond this scope of this tutorial.
Get the module
Grab it from the FCKeditor project page. Unzip the files to the
The module plugs the editor into Drupal, so you still need to get the actual editor. Unzip the files to the
sites/all/modules/fckeditordirectory, creating an
fckeditordirectory inside of the
Enable the module
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.
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>.
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'], ] ;
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”.
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:
Then locate your Drupal settings file (probably at
sites/default/settings.php). Uncomment the line with the
$cookie_domainvariable 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'] ;
$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.