WYSIWYG Text Editors Reviewed

— Published February 27th, 2006  |  by Laurence Veale   |  6 Comments

Answer: Over the past two months, we’ve received three requests to give advice on WYSIWYG editors to be used in different web-based content management systems. Here’s what we’ve found.

Things to bear in mind when incorporating a WYSIWYG editor

Most of these editors do too much and offer to much power. You need to ask if options like colour, justification/indentation and font selection are superfluous for editing content for a standard web page. Give writers too much control or too many options and it may compromise the aesthetics of your site. Remember, your writers are just that, not designers

WYSIWYG editors on test

Let’s put some of the current offerings through their paces:

1. XStandard, xstandard.com
2. Editize, editize.com
3. TinyMCE, tinymce.moxiecode.com
4. FCK Editor, fckeditor.net
5. widgEditor, themaninblue.com/experiment/widgEditor/

Comparison of features

Criteria	XStandard (Lite)	Editize	TinyMCE	FCK Editor	WidgEditor
Code quality	Excellent (XHTML 1.1 Strict)	Average	Better than average	Poor	Average
Cost	Free	$149 per website	Free	Free	Free
Cross Platform/Browser	Windows only, IE, Moz, FF	Platform independent (applet), most modern browsers	Yes	Claims to be (but problems across browsers)	Yes
Easy to use	Yes	Yes	Yes	Yes	Yes
Accessibility	Poor	No	Good	Poor	Better than average
Easily installed	Yes	Yes	Yes	Yes	Yes
Wide range of features	Yes	Yes	Yes	Yes	No
Easily configured	Yes	Yes	Yes	Yes	No
Easily customisable	Yes	Yes	Yes	Yes	No
Technical Support	Yes	Yes	Yes	Yes	No

Overall

If standard of code is the most important priority, then there’s really only one editor, XStandard. XStandard Pro provides even more features. For large organisations, it may be the best choice. However, it has to be installed and it is inaccessible to use.

Outside that, TinyMCE gets our “Best in Show” award. We’ve even decided to use it ourselves for our upcoming blog. Next, we like widgEditor with fewest features and no-bloat approach.

Detailed evaluation

In looking at the different editors, we took the following criteria into consideration:

• Quality of code produced (the (X)HTML that comes out of it)
• Costs & licencing
• Platform & browser compatability (what platforms and what browsers does it work with)
• Ease of use (including accessibility)
• Ease of installation
• Features
• Configuration options (can certain options be turned on or off?)
• Customisable (can it be altered to suit your needs)
• Technical Support

Usability Testing

Our goal was simple: to insert a passage of text and format it with headings, bolding and bulleted lists.

We did this in two ways:

1. Through the editor directly
2. Pasting a passage of preformatted text from Microsoft Word (as is often the case in real world situations)

• Test 1: “standard use”, using combination of mouse and keyboard
• Test 2: keyboard only, without mouse (testing for keyboard shortcuts, ability to tab between the text area and the controls and for accessibility for mobility impaired users)
• Test 3: Screen reader (JAWS) to test for blind/partially blind users.

1. XStandard

Overview
XStandard comes in two flavours, Lite and Pro. It has to be installed on each PC on which it will be used. Lite is free and would probably suffice for most applications. However, if you want to clean up pasted content from Word or equivalent, you would have to go for the Pro version, which increases the cost based on number of users.

Benefits	Drawbacks
Easily customisable through XML and parameters	Must be installed on PC (not web-based)
Free (Lite version)	Not accessible to use
Can be used on JSP, ASP, ASP.net, PHP and Cold Fusion	When adding a link, it does not check for a valid URL.
Extremely good code output	Free (Lite ed. Price for Pro is per licence rather than single purchase – could prolong the installation due to organisations’ purchasing/procurement processes.
Easily localised for different languages thru XML
Screenreader preview option highlights links like “click here” or “more” which may not make any sense when read out of context

Results

Pasting from Word
Pasting from Word loses all formatting in XStandard (Lite). This may not actually be a bad thing in terms of overall code quality, but may be frustrating for the user. The Pro version cleans (rather than wipes) Word formatting.

Keyboard & JAWS
XStandard doesn’t seem to be keyboard friendly, which has further implications for JAWS. While the code produced is truly excellent and accessible, using XStandard is not. However, while in the text area keyboard shortcuts work (CTRL+B produces bold text).

2. Editize

Overview
Editize is a java applet, making it more versatile than the XStandard, as it does not need to be installed. However, as an applet it does require a certain java runtime enviroment (JRE), so you might have to alter the PCs settings. There may also be serious issues in using it across a firewall/proxy server.

Benefits	Drawbacks
Easily installed	Code produced not always clean
Easily configurable	Not accessible to use
one licence per site – very affordable	Takes a while to download applet (on dial-up)

Results

Pasting from Word
Pasting from Word produced slightly dodgy HTML, with no option to clean up the code. For example, there were plenty of empty <span lang=”EN-GB”><br /></span>. While the default is (standards-compliant) (<strong>, pasting from Word produces <b>. It also does not clean up duplicate tags. For example, bolding two words, one at time produces <strong>head</strong> <strong>when</strong>

Typing the content directly into the editor produced much cleaner HTML code.

Keyboard Only & JAWS
Editize was not fully usable via the keyboard. The editor simply couldn’t receive the focus when tabbing. Likewise, with JAWS, the WYSIWYG editor couldn’t be seen so Editize clearly fails miserably on accessibility.

3. TinyMCE (could this be the one?)

Overview
TinyMCE offers a JavaScript plugin and offers tons of functionality. The interface is similar to Microsoft Word so should be familiar to most users.
While offering many options, it can easily be configured to supply the minimum.

Benefits	Drawbacks
Excellent documentation and support.	Code produced not always clean
Somewhat accessible	Not fully accessible to use
Produces well formed XHTML (mostly).
Localisation/internationalisation options, ships with 36 languages – easy to add more
Customising and configuring is easy
Open source
Good cross-browser compatibility

Results

Pasting from Word
TinyMCE has specific functionality to paste from Word. However, while it does clean up most of the Word formatting, it can insert needless and mysterious tags :
<a name=”OLE_LINK1”>

Keyboard
While at least you can tab through the different buttons, once you are in the textarea, it is difficult to get out of it. Use of the tab key is perhaps one behaviour that should not be ported from a standard word processor.

JAWS
Use with JAWS proved best so far, but far from ideal. Tabbing between the formatting controls was easy with good descriptive text, but not ideal, with issues once in the textarea.

4. FCK Editor

Overview
On the face of it, looks similar to TinyMCE with its Word-like interface, but there are crucial differences. It doesn’t have full support in Firefox, for example producing <span style=”font-weight: bold;”>are </span> instead of <strong>.

Benefits	Drawbacks
Free	Code produced is dirty
Open source	Not truly cross-browser compatible (different code produced by different browsers)
Easily configurable	Offers a “Paste from Word” feature but produces appalling code

Results

Adding the content directly is passable at best. Indenting a paragraph produces the following code, which is as bad as using the <font> tag.
<div style=”margin-left: 40px;”>

Pasting from Word
The “Pasting from Word” feature looks promising but fails to deliver, inserting nested span and div tags as well as the infamous <font> faux pas.

Keyboard & JAWS
Keyboard produces poor results, can’t tab across the main buttons. JAWS doesn’t fare much better with

5. widgEditor

By far the simplest and lightest of all, perhaps ideal for the stricter organisations who don’t want to give too much control to editors.
It’s difficult to customise, as it is based on some very technical DOM scripting, which is beyond all but the most advanced JavaScript coders. It is easy to implement or configure, language support would have to be manually coded in, but not overly difficult, least number of options (but then again, how many due you actually need?).

Benefits	Drawbacks
Easy to install	Not easily customised
Open source	Trys to clean Word HTML but not completely
Easily configurable
Good accessibility
Minimum number of features

Results

widgEditor is easy to use. However, as it’s not supported by the developer, there is considerable risk associated with ownership.

Pasting from Word
Pasting from Word attempts to clean up code, but instead adds additional tags like <em> and inserts new paragraphs rather than line breaks.

Adding content directly is simple. There are not too many options, which is really a good thing.

Keyboard & JAWS
Keyboard use, unlike the most of the other editors, is pretty good in Firefox, but problematic in Internet Explorer, with all but the most patient users likely to give up on it. Likewise, with JAWS, it comes pretty close, but with some problems with the back-tab whenever you have lists in the content.

Next Steps

• There is a discussion about some of the editors we looked at over at the home of widgEditor.
• HTML Area, A directory of browser-based WYSIWYG editors
• A halfway house between raw HTML and pure WYSIWYG is textile. Users use defined codes to format their text.