Building CKEditor with HTML5 Support

Using CKEditor but frustrated by the lack of HTML5 support? Here’s a quick fix that will resolve the bulk of the compatibility issues.

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.

Be Sociable, Share!
 

2245 Gilbert Ave. 300 | Cincinnati, OH 45206
©2010 Core Five Creative.