CKEditor is a forward-thinking project in many ways, but for some reason has lagged behind in supporting HTML5. One of the biggest issues is that it doesn’t know about all of the new block-level elements like header, footer, article, section, and aside, and while it doesn’t remove them, it does treat them as inline elements and wraps them in paragraph tags.

Thankfully, CKEditor is beautifully architected, making it quite easy to enhance or replace nearly any aspect of its functionality. There is a set of core plugins that are compiled together into the released version, which in turn can make use of external plugins for additional features. Included in the core is a DTD plugin which, as the name implies, defines all of the HTML elements the editor understands and governs how they should be treated. Adding basic HTML5 support is merely a matter of expanding on the definitions within this file and packaging it together with the rest of the core into a new version of ckeditor.js

The good news is that someone has already done this. Jonathan Neal provides an updated dtd.js file in the official ticket (#4556) as well as a rebuilt version of CKEditor and a live demo. The only problem is that it’s built against version 3.1 of CKEditor, and the current stable release as of this writing is 3.3.1. So, in order to have the latest version of CKEditor AND incorporate the HTML5 additions, we have to build our own from source. That may sound daunting to some, but in fact it’s quite simple. Here’s how:

• Check out a local working copy of the CKEditor source using Subversion. For version 3.3.1, use this:

  svn co http://svn.fckeditor.net/CKEditor/tags/3.3.1/

• Update the dtd.js file within your working copy here:

  _source/core/dtd.js

• I compared Jonathan’s customized version from 3.1 against the released version for 3.3.1 and the only differences were in simple element lists that needed to be expanded, so for 3.3.1 at least, it’s safe to just drop in the modified version of dtd.js as a complete replacement.

• Repackage ckeditor.js using the provided packager tool. There’s a BAT file for Windows and a shell script for Linux and OS X. Both simply call a java packager that does the dirty work for you:

  _dev/packager/packager.sh

  The packager makes new versions of ckeditor.js and ckeditor_basic.js from source, replacing the ones already there. There is also a “releaser” tool that does that, as well as creating a complete, zipped release package, including documentation. Usage is similar. However, I just downloaded 3.3.1, unzipped it, and copied over the new ckeditor.js and ckeditor_basic.js files from my working copy.

That’s all there is to it! Until a future version of CKEditor includes official support for HTML5, this will allow most new HTML5 elements to render properly.

However, over time, and despite a highly configurable, pluggable architecture, the code base for FCKEditor, initially released in 2003, began showing its age. Markup and scripting were a patchwork quilt of outdated methods, and performance was suffering. Thus, a complete, ground-up rewrite was started, culminating in the release of the newly-dubbed CKEditor 3.0 in 2009.

The new release is very impressive. Load times are noticeably faster, and a new, modern API makes client-side configuration and integration considerably more direct and powerful. Unfortunately, one victim of the streamlining was the built-in file manager. CKEditor is now pure JavaScript. The developers offer a commercial package, CKFinder, which provides server-side integration for ASP.NET, ColdFusion, and PHP, but there is no longer a free file manager built into the open source editor to which you can add your own server-side connector.

Thus, we decided to write our own replacement file manager, which we are releasing today. We didn’t bother giving it a fancy name; we’re just calling it FileManager. FileManager is powered by jQuery, and incorporates a variety of plugins to provide various bits of functionality:

• The layout is handled with Dave Methvin’s Splitter plugin, which allows the user to adjust the width of the panes (http://methvin.com/splitter/).
  
• A slightly modified version of Cory S. N. LaViska’s FileTree plugin, used to create the tree view. (We added some additional callbacks.) (http://abeautifulsite.net/notebook/58)
  
• We also used Cory’s ContextMenu plugin for contextual menus (http://abeautifulsite.net/notebook/80).
  
• Alert dialogs and user prompts are presented via Trent Richardson’s Impromptu plugin (http://trentrichardson.com/Impromptu/).
  
• Tables are managed via Christian Bach’s TableSorter plugin (http://tablesorter.com/).
  
• Finally, uploads and other form submissions are handled with malsup’s ubiquitous Form plugin (http://malsup.com/jquery/form/).

The mini icons are from the venerable Silk icon library (http://www.famfamfam.com/lab/icons/silk/), and the large icons are based on the FineFiles collection (http://plainz.oh.land.to/download_icon.html), though we have created a handful of additional icons on our own.

In the spirit of the original FCKEditor file manager it is intended to replace, FileManager provides a simple javascript API which you can use to write a connector for your preferred server-side language. The API is described in detail in the ReadMe.txt file within the project, and also on the FileManager project page. At the time of this writing, the only complete connector is for Lasso. A python connector is nearly finished. Submissions for other languages (as well as bug fixes and suggestions in general) are encouraged!

FileManager integrates with both FCKEditor 2.x and CKEditor 3.x. For complete instructions, including how to download the project, see the project page.

Some of the topics we have planned include tutorials for everything from simple scripting tricks to advanced network configuration, some software releases (from single file solutions to full-blown apps), our own unique take on the lingering IE6 problem, and more. We might even convince the creatives to pop in with their two cents on the design topic du jour as well, whether it’s the Tropicana packaging debacle or the leaked Pepsi identity brief.

We hope you find this stuff as interesting as we do, and that perhaps it will, over time, become a useful resource for our peers in the web development community.

Cheers!

Jason Huck
Director of Technology
Core Five Creative