Customizing FCKeditor on Drupal

Editing modern CMS-based sites usually means a bit of HTML editing.  More often than not there is some kind of editor built-in with the application framework you are using to facilitate this.  On Drupal you choose whichever editor you think works best.  For me the choice was simple - FCKeditor.  Why FCK? It supports a lot of browsers and is built in a modular fashion.  So there are many different ways you can use it.

Before we get started there are a few decisions to make about how you want to integrate with Drupal.

Choosing Your Module

You can use the "Wysiwyg API" module if you are interested in using the editor for everyone of a specific input format (think "Filtered HTML", etc).  This new module allows you to download the current FCK codebase and permission against that and only that.  It is limited but growing in popularity due to the number of other editors that are supported by this module.  If you need more than one editor this is your best bet.

What I have found in practice though is that you will probably want the FCKeditor module rather than "Wysiwyg API" if you want to customize with a GUI interface and/or set permissions based on URL and/or another method.  For most new installs I use "WYSIWYG API" for it's simplicity.

If your intent is to use custom buttons for page break and to manually set teaser length I would recommend the FCKeditor module - it has the Drupal custom plugins included.

Getting the Code

Once your module is installed you will want to download the source code for the editor.  This will effectively activate your module and allow you to set permissions so you can use it.

Make Editing Pleasurable

By default there are a few settings that are targeted to yesterday's editing preferences.  I like to change the following to better utilize my browser's built-in functions.

1. Simplify the toolbar - by default FCK shows absolutely everything under the sun.  That means 4 or more bars worth of buttons.  Simplify that!  This can be done in the fckconfig.js file by modifying the tokens in the toolbar.  You can also add new toolbars, when using Wysiwig API you will need to activate new toolbars by editing fckeditor.js to specify the default.  With the FCKeditor module you can use the Drupal admin page to specify the default.
2. Activate the Drupal Plugins - the FCKeditor module comes with the Drupal Plugins.  These two buttons will set your teaser length and/or page break points.  If working on a site which requires these features the buttons are worth it. (Alternatively, you could copy the plugin from the FCKeditor module's folder to your Wysiwyg API folder and then add the name in your fckconfig.js file if you aren't using the FCKeditor module).
3. Switch to the Silver skin - the default of all FCK instances is to display a yucky brownish color to match an old Microsoft Office theme.  Not all of my users are on Windows so I switch to "Silver" when I can.
4. Disable the right-click context menu - when you're editing text in a web browser you often need the real right-click menu rather than one supplied by JavaScript.  Why? Some browsers block the JavaScript code.  Also, Firefox lets you change languages with this menu - quite important for spell checking.  You can change this in fckconfig.js as well.
5. Disable built-in spell checking - Most editors like this do a terrible job of spell checking anyway.  Modern browsers do a better job on their own.  Let the browser manage spelling like you know it should.  Again, fckconfig.js will get you there.
6. Whitelist any odd HTML notation you use - one of my projects involved adding <span> tags into the editor space.  Not ideal code, I know, but it is worth noting that you can override the editor to allow certain tags through when it cleans up the code.  Yes, FCK cleans up broken HTML code.  It even has options in fckconfig.js for removing Word-style formatting.  What bliss.

Those changes will probably make you a hero with most offices.  FCK is widely supported so if you get it working it just works.  It has been around for a long time and seems to have pretty good momentum.

When you want to move on to bigger and better things I suggest creating your own plugins for FCK.  They can be complex, but they are well worth the struggle when you get them working.  I use a custom plugin to produce buttons which insert pre-defined text into the HTML.  More on that in a future posting.