I have been doing quite a bit of work recently on the CMS that runs this site. I realize that I could have just grabbed one of the many fine open source implementations but as a developer I felt it would be wrong if I didn't roll my own. Just kidding, the real reason was that it was a good excuse to play with and learn JSF. As you would expect there is a page that lets me add and update the content of the site. For a long while this contained a a simple textarea where the page content was entered. While this system worked fine it wasn't to my liking. I don't particularly like entering HTML by hand and other people were starting to add pages to the site and I didn't want to have to teach them HTML. I looked around for a HTML editing widget and found that the Tomahawk sub-project of MyFaces contained an inputHTML widget that seemed to fulfil my needs. I quickly switch my application over from using the JSF RI to using MyFaces and tried out the widget. It seemed to work fairly well but with continued use I've noticed it has some problems.

There are, of course, other HTML widgets so I thought I would try another one or two out. Since this requires some work I also thought it would be a good idea to review each one as well. The reviews below are just my ramblings regarding the various merits of the different widgets feel free to take them with a pinch of salt. One of the most important things to me is ease of install. The last thing I want to do is be fighting with some piece of code that I hoave no knowledge of.

So on with the review...

Kupu

This is the editor that is currently packaged in Tomahawk and so the one that most people probably try out first. It is developed by Oscom and used in a few open source projects such as Silva and Plone. In terms of features it's got the most important formatting and layout options. Tables are fairly easy to create and text can be styled in all the expected ways. The HTML that is produced is fair but not brilliant. I like paragraphs wrapped in p-tags but this editor tends to use br-tags.

The down sides aren't immediately obvious but as soon as you start using this widget you'll run into problems. I've found that after loading it is necessary to type characters into the edit window before you can delete anything even if the widget is pre-populated. Part of this site requires that I display source code. Source code requires precise formatting which is generated by another application. When I paste the HTML formatted source into the HTML editor it strips all the indentation at best and flatly refuses to display anything at worst. The last problem I will draw your attention to is with tables. While it's easy enough to add them manipulating them after that is difficult to say the least. On the couple of occasions I have played with tables using this editor I eventually given up and entered them by hand. Finally, probably the most annoying aspect is the way styles are applied. After a heading the next line down is normally give the normal style. Kupu for some reason leaves it as the same level heading and it is pot luck what will happen if you change the style before typing anything.

I all of that wasn't bad enough there are reports of the editor not working correctly in IE and something I find a little concerning is that it seems to have been abandoned. The last news item on the site is the release of Kupu 1.3 on 09/05/05.

TinyMCE

TinyMCE is probably my favourite HTML widget of the ones listed here and also the most complete. It is released under the LGPL license so can be incorporated in to any project and comes complete with every possible styling and editing tool you could want in a fairly easy to configure toolbar. The HTML produced is clean and neat without a lot of spurious mark up. The HTML source editor seems to put up with translating even really horrible mark-up into something that can be rendered. Considering all of these widgets make extensive use of JavaScript, which isn't the fastest of languages, the responsiveness of this editor is fantastic.

Table creation is simple and the drag-resizing works well as does cell merging and splitting. Intergration of TinyMCE into a site couldn't be simpler. Unlike Kupu there is no specific JSF tag to include the editor. Instead a small amount of JavaScript configuration is added to the top of the page and an h:inputTextarea included where the editor should appear. The text area is replaced by the TinyMCE editor. It is possible, via configuration, to convert only some of the text areas on a page and also include more than one editor on a page (Kupu allows only one editor per page). Due to licensing problems (and incompatability between the Apache licence and the LGPL) it is unlikely that a specific tag for TinyMCE will appear in Tomahawk any time soon.

In fact, the only down side that I can find with this editor is the shear size of the download when many of the plugins are being used. The basic editor is quite simple and to make it more comprehensive it is neccessary to include at least some of the plugins that come shipped with the standard install. After including the plugins the download swells in size resulting in a noticable delay while the page is retrived. I'm happy to live with this though as the editor is exceedingly good. Good enough, in fact, that I have switched this site over to using it already.

Update 

I've discovered something about TinyMCE that I think it's worth pointing out. By default it will attempt to convert absolute URLs into relative URLs if it detects that the item being linked to is in the same domain as you are currently working in. This behaviour is highly annoying if the path that you edit pages from is not the same as the path that the page exists at. For example if you edit pages at http://www.example.com/editing/page.html and the page really exists at http://www.example.com/pages1/pages2/my-real-page.html then any paths to images, for example, will start ../ rather than the required ../../. This feature can be turned off by setting "convert_urls : false".

Dojo

Dojo 's rich text editor is the simplest of the editors reviewed here supporting only the most basic styling and markup. Having said that what it does it does well. Because of the limited number of features the download is small so pages appear quickly. I imagine for many people this editor would be enough but for a CMS it is probably too restrictive. There is, for instance, no HTML source editing and no table creation which could be a problem. While I don't recommend the Dojo editor the rest of the JavaScript components offered on the Dojo site appear to be of the same high quality and solve many common problems.

Xinha

Xinha is a fully featured editor that is perhps even more comprehansive than TinyMCE if that is possible. The toolbar, in my opinion, is better looking than the one in TinyMCE and can be skinned to great effect. The source editor copes well with badly written HTML and the component itself produces quality HTML mark-up. Due to the size of this editor it suffers from the same problem as TinyMCE in that the download takes a long time. With an editor of this quality though it is worth the wait. There is currently no specific tag for including the Xinha editor and a method similar to the one used to include TinyMCE needs to be used. Due to the licencing of Xinha there might one day be a specific tag to include it but don't hold your breath.