Web based editing tools are becoming standard issue in modern content managment systems. As more and more organizations discover the advantages of using strucured markup it is important that these editing tools allow editors to markup content without knowledge of HTML. Unfortunately, many of the WYSIWYG -editing tools in use today create invalid markup or do not have the functionality required. Therefore I have selected some web based editing tools and tried to create a sample document in each of them.



Test method

I have selected test criteria based on commonly found content types and their requirements on markup. The test criteria are in the form of a sample document which contains headings, lists, tables and other types of content. Each tool has been used to create the sample document after which the created markup has been inspected. No features for visual formatting has been tested. These are rarely needed as formatting usually is done in a site-wide stylesheet.

Most of the tools can be configured with custom buttons and/or schemas to create specific markup. In this test the official demo version has been used.

Please not that this test is about web based editors (hosted in a browser window). This does not include Dreamweaver, Fronpage and similar tools. The selected tools (and their respective licensing type) are:

Test result

The total score for each editor is listed below. For test result details see here.

Editor Score (out of 19) EditOnPro 16 XStandard 14 eWebEditPro 14 CuteEditor 14 TinyMCE 13 FCK-editor 9 JXHTML-Edit 7 Kupu 6

If you find error in the results, please leave a comment or send an e-mail to peter at standards-schmandards.com.

EditOnPro and XStandard seem to be the most advanced editors. They do not rely on cleanup routines or built in browser functionality which ensures consistency between different browser containers. Also, using real XML makes them suitable as a platform for future content management requirements. EditOnPro can be extended with custom schemas and can thus be used as a generic markup editor for specialized content. EditOnPro is a java applet which compared to XStandard makes it load more slowly.

Although CuteEdit and eWebEditPro scored well,they have some drawbacks. Creating table headers involves creating a table and then applyting headers thorugh a separate dialog (in the case of CuteEdit it involves right-clicking a cell, selecting “Verbs” and then “Change to header cell”). This may be too cumbersome for editors to do. And it seems impossible to do this when running CuteEdit in Firefox 1.5.

FCK-editor creates different markup depending on which browser is hosting the editor. Nested lists get the correct markup if you run FCK-editor in Internet Explorer, but not in Firefox. Developers would expect the same behaviour from a component that claims cross-browser compatibility.

TinyMCE scored best among the open source editors. It has functionality to set the lang attribute and title for most elements. Unfortunately it has poor handling of nested lists and I could not find a way to create table captions. These issues should be easy to fix so maybe a future version will provide better functionality.

JXHTMLedit crashed twice in Firefox 1.5 and sometimes display artifacts were left after deleting content.

Observations

Many of the tools have a toolbar with icons for various markup needs. Some common mistakes in the toolbar are:

The icon to create a blockquote looks like it will increase the left margin. This may lead editors to use incorrect markup to format their text.

Icons for items rarely used (such as justified text, subscript, superscript, underline and strikethrough) are available instead of icons for more commonly used markup such as blockquote, quote and acronym.

Most of the editors provide extensive customization options. EditOnPro can be set up with a specific schema to enable creation of custom tags.

Recommendations to WYSIWYG-editor developers

Some fundamental things that all editors should consider:

Remove toolbar buttons for rarely used markup items such as justified text (justified text on the web is bad for readability).

The default installation should provide buttons or menu options for inline quotes, blockquotes and acronyms.

When creating a table, headers should be created by default instead of forcing the user to add them later. Throw in a default caption as well to make sure content editors do the right thing.

Make sure images without alt-text specified receives an empty alt attribute.

Do not use the icon for “indent left” for blockquote markup.

If you claim cross-browser compatibility, make sure that the generated markup is identical.

Create valid markup

References