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.

    FCKeditor Revised Toolbar

    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.

32 Responses to How to Install FCKeditor on Drupal

  1. Nick says:

    Have you tried integrating the upload/file management with CKEditor by chance?

  2. Not sure I quite understand your question, Nick. If you mean the built-in file uploader/manager that comes with FCKeditor, then yes. See the last section, “5. File uploads”, for a run-through of what needs to be done to make that work. Or are you referring to a separate module?

  3. Suzanna says:

    I just installed fckeditor. I followed all of your instructions, but it does not show up in IE7. Is there a bug you know of in IE7 that won’t allow it to show up? It shows up in Firefox… any suggestions?

    Suzanna

  4. I haven’t come across any bugs with IE7. My first thought is that it might be related to the theme you’re using. You might try switching to the Garland theme, and see if it works then. If so, that will help you hone in on the problem.

  5. David says:

    I kept receiving a “file open for write” error when trying to upload my edited sites/default/settings.php. I am using a shared host. Any idea what or if I can do to allow me to update the file?

    Thanks.

  6. Gand says:

    I’m using Drupal 6.2, the FCKeditor module 6.x-1.2-1, and FCKeditor 2.6.1
    As soon as I enable the module I get this error on admin/settings/fckeditor: http://www.pastebin.org/44333
    “…user warning: Table ‘drupal.fckeditor_settings’ doesn’t exist query:…” etc…

    How to solve? Thanks.

  7. Gand says:

    Solved, probably unzip files with wrong permission; disinstalled and then reinstalled. Thanks.

  8. Gand says:

    It seems that with FCKeditor 2.6.1 there is no var test = window.top.opener.document.domain ; in file sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/io.php.

  9. Lopo Lencastre de Almeida says:

    CKFinder is an independent program that integrates flawlessly with FCKEditor

    http://www.ckfinder.com/

  10. Mark says:

    Hi, in my Drupal when entering the html filter string, it only allows a limited number of characters (guess 255?) and your list doesn’t fit in there… (though I think many of those tags are very rarely used)

  11. marc says:

    Thanks Jonathan, your how-to did help a lot.
    Especially the window.parent.OnUploadCompleted thing was the bug I wouldn’t have been able to find myself.

    Thank you very much. Erverything worked out for me

    Peace

    Marc

  12. Fiona says:

    I followed your instructions for installing the fckeditor except for the nesting of the extra fckeditor dir. The module does not appear in the list of other modules and I cannot therefore enable it.
    All the files have root permissions, although a theme which I installed which also has root permissions, works.

    I don’t know what I not doing right!
    How can I do an uninstall, without having to delete each file individually?

    Any, all help appreciated.

  13. tess says:

    Thanks! That really helped me. I kinda got lost in the File Uploads part (inserting it into the code) but that is because i am a novice and dont know how to insert it.

  14. JohnnyMoney says:

    I am happy !

    Thanks to this page i finally managed to set up and work with FCKEditor on my Drupal 6x-dev version test site.

    This module makes all the difference, being able to add images and flash presentations to my stories and pages !

    Thanks

  15. JohnnyMoney says:

    Oops!
    Working well with IE6 but not with Firefox 2. The images don’t show on screen in this last case for example.
    Will look around and see what can be done to remedy this.

  16. jr says:

    Doesn’t work for me on ly localhost, some help please…

  17. chandra says:

    geez…i now have fckeditor on my site!!!

    Thank you for such a simplified step by step instruction. Very very helpful to us who are new to drupal.

  18. Tommy says:

    Thanks! I now have a working FCKeditor with filebrowser and file upload!

  19. Steven says:

    Great page, very useful as FCKeditor page do not even have an install doc.

    Thanks

  20. Ruined says:

    I can’t leave you a comment because fckEditor isn’t running in this text area. And I’m ruined now. Ruined I tell you. Thanks for nothin.

  21. TJOZ says:

    FCKeditor is working, but when I try to upload a file, a whole bunch of XML errors show up in the browser window. It’s not working in Drupal 6.8!

  22. Carlos says:

    great!
    worked fine here :)

  23. Nauman Ikram says:

    wonder info. keep it up. Working absolutely right.

  24. This works in Drupal 6.9.

    ie – Download both files, stick the second one in the first one as indicated, FTP to your Drupal directory, enable, set permissions, and it works.

    NB I disabled the other WYSIWYG modules first.

  25. PS I forgot to say thank you!

    And here’s where you can find a demo:
    http://www.normanfellows.com/drupal/node/17

  26. tjslager says:

    my io.php file does not include the line:
    var test = window.top.opener.document.domain ;

  27. Anthony says:

    Is there an option that I’m missing that allows me to add css styles inline or even add the css handle? Every time it saves it, it just filters them out.

    Please help and thanks.

  28. Dayton says:

    I had it installed and working on a couple of other sites. However, this time, uploading files uploads the file and the “progress” image never goes away. I have permissions and paths set properly.
    Can you give me a hint as to where to insert variable alerts or whatever to troubleshoot? Thank you.

  29. Kfir Gollan says:

    Thanks!
    This was really helpful! :)

  30. Matt says:

    Any idea how to add more fonts to FCKeditor?

  31. Matt says:

    Found out how to add other fonts:

    Add to the fckeditor.config.js file

    FCKConfig.FontNames= ‘Georgia;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’ ;

  32. Matt says:

    To add font-sizes —

    Add to the fckeditor.config.js file:

    FCKConfig.FontSizes = ’16px’ ;