Blog Tags: 

Upgrading FCKeditor to CKeditor

I just finished upgrading the WYSIWYG editor on the web site from FCKEditor to CKEditor, which is FCKEditor's less offensively named successor.

Improvements

  • A noticeably faster, more lightweight code-base which was rewritten from the ground up.

  • Full-screen mode works beautifully now. I love how this instantly removes all the clutter and lets me focus on the content I'm editing without being distracted by the rest of the web site.

  • The edit area can be resized dynamically by dragging the window corner, giving you as much room to edit as you need. If you've ever felt uncomfortably cramped inside a tiny edit box you know what a relief it can be to escape.

  • Source mode now pretty prints your XHTML tags, with proper indenting. When you need to edit raw source, this feature makes it much easier to visually parse what you're looking at.

  • A status field provides information showing your current position in the document's tag hierarchy.

  • Advanced theming support. The new default theme Kama let's you pick a colorset to match the theme of your web site:

Personally I like Kama better but if you're feeling attached to FCKeditor's somewhat clunky looks you can select CKEditor's V2 theme which looks just like it:

Out of the box CKEditor also comes with a rather pretty Office 2003 theme:

Drupal installation and upgrade notes

On Drupal, you install CKEditor the same way you install FCKEditor. First you download CKEditor and the CKEditor Drupal module. Next, extract the CKEditor Drupal module in your site modules directory and then extract CKEditor itself into the module's directory, like this:

cd /etc/drupal/6/sites/all/modules
tar -zxvf ckeditor-6*.tar.gz
mv ckeditor_3* ckeditor
cd ckeditor
tar -zxvf ckeditor_3*

Enable the CKEditor module while disabling FCKEditor (I.e., enabling both will result in Javascript errors). Drupal's CKEditor module inherits the settings from the FCKEditor module so the upgrade is relatively painless.

If you've customized FCKEditor's button layout by editing modules/fckeditor/fckeditor.config.js you'll want to customize CKEditor's button layout as well by editing the profiles in modules/ckeditor/ckeditor.config.js. Most of the button names are the same except for a handful which have been renamed:

  • FormatName => Format
  • FontFormat => Font
  • UnorderedList => BulletedList
  • OrderedList => NumberedList
  • StrikeThrough => Strike
  • Rule => HorizontalRule

Gotcha: pop-up mode is broken (but good riddance!)

FCKEditor was slow enough that we decided to disable it by default for administrator accounts on this web site while still allowing us to launch it on demand in a pop-up when we really needed it.

The bad news is that pop-up mode doesn't work well in the version of CKEditor I've been testing so I've had to disable it. The good news is that CKEditor is fast enough now that I can enable it by default and the full-screen mode works even better for minimizing distractions.

Come to think of it, pop-up mode in FCKEditor was kind of a disaster. If you accidentally tried opening more than one editing pop-up, you would loose loose your previous edit without warning. After that happened a few times I developed a deep mistrust for FCKeditor and would edit the bulk of my content without it. Good riddance to that!

Add new comment