Skip to main content

Review of Drupal rich text editors

This article has been migrated from f3 Internet, with permission.

There are a huge number of rich text editors available for content management systems, which allow end users to conveniently edit web pages without knowing any markup (HTML). Most of those available are so-called WYSIWYG editors, where content looks similar in the editor to how it will look on the web page when published. These editors vary considerably in features and complexity but most suffer from the following main problems:

  • They generate markup that doesn’t validate according to W3C specifications.
  • They allow the creation of content that will fail WAI accessibility guidelines.
  • They use inline styling, which makes it practically impossible to restyle the content via CSS.

This article reviews all editors that are available for Drupal via it’s WYSIWYG module, in order to narrow down on the editors that are best for producing valid markup with good accessibility and ideally no inline styling.

Index

The tests

To determine the best editors – those that don’t suffer from the problems mentioned in the introduction – I will be running a series of tests, based on the following questions:

  • Standards: Does all generated markup validate? Ideally it will validate as XHTML 1.0 Strict.
  • Accessibility: When you add an image can you set its alternative text? Ideally this will not be optional.
  • Usability: Is it possible to create a link that opens in a new window? Ideally this will not be allowed.
  • Styling: Does any generated markup use inline styling? Ideally the editor will use classes to give the CSS control.

After years wrestling with rich text editors I’m not optimistic that any will pass all tests.

Validation

I attempted to validate the generated markup as XHTML 1.0 Transitional for the following reasons:

  • All editors generated short tags, like <br/> or <img ... />, which is allowed by XHTML but not HTML.
  • Editors that can create links that open in a new window used the anchor element’s target attribute, which is not valid XHTML 1.0 Strict.

If an editor created markup that validated as XHTML 1.0 Transitional, or came close, then I also tried validating as XHTML 1.0 Strict.

Dialog boxes as popup windows

In general, popups are pretty bad for usability as they can be confusing to users (see mistake number 9 in Jakob Nielsen’s Top Ten Mistakes in Web Design). Lightboxes are better (see 10 Best Application UIs). This presumably will become less of an issue as new generations become familiar with operating system and browser interfaces, but it’s still an issue now.

So, we’ll add a new question to our tests:

  • Usability: Do dialogs open in a new window? Lightboxes or even Javascript popups are preferable.

Except for the use of popup windows, the usability and accessibility features of the editor itself will not be considered.

Javascript

All editors rely on Javascript, but although it can pose accessibility problems an evaluation of its use is outside the scope of this article.

Table accessibility

Some editors can create tables. I will not be reviewing whether the table markup they generate is accessible or not, because it’s a complex issue and I’m going to assume that tables will only be used to display simple tabular data one level deep (i.e. no nested tables).

Software versions

  • Drupal 6.17
  • WYSIWYG 6.x-2.1

The editors

The editors currently available via the WYSIWYG module are as follows:

  1. WYMeditor 0.5 rc 2 (thought reported as 0.5-rc1 when installed): A basic WYSIWYM editor, which differs from the most of the others in that it shows you the structure of what you’re creating rather than how it will look once created. It claims to be standards compliant to the W3C XHTML specification.
  2. YUI editor 2.8.1: A feature rich WYSIWYG editor.
  3. openWYSIWYG 1.4.7: A WYSIWYG editor with a medium number of features.
  4. TinyMCE 3.3.8: A feature rich WYSIWYG editor.
  5. jWYSIWYG 0.6: A basic lightweight WYSIWYG editor.
  6. Whizzywig 61: A basic WYSIWYG editor that generates XHTML.
  7. NicEdit 0.9 r23: A basic and good looking WYSIWYG editor.
  8. CKEditor 3.3.1: A feature rich WYSIWYG editor.
  9. markItUp 1.1.7: A lightweight markup editor, that can generate content in a number of formats (HTML, Textile, Wiki Syntax, Markdown, BBCode) for conversion into markup. It’s not a WYSIWYG or WYSIWYM editor, but instead adds formatting to whatever text you’re writing in whatever format you’ve chosen.

I will not be reviewing FCKeditor because it’s been replaced by CKEditor (though version 2.6.6 is still available for download if you wish).

Installation issues

markItUp would only install after adding a file [drupal_root]/sites/all/libraries/markitup/markitup/readme.txt that contains its version number, where [drupal_root] is the root of your site, as per http://drupal.org/node/767628#comment-3112116. If you’re on Linux, you can run the following command from the command line:

cd [drupal_root]
echo “1.1.7” > sites/all/libraries/markitup/markitup/readme.txt

openWYSIWYG conflicted with jQuery, so to fix I took the quick option of replacing all instances of $ with $openWysiwyg in [drupal_root]/sites/all/libraries/openwysiwyg/scripts/wysiwyg.js, as per http://drupal.org/node/713942.

Whizzywig 61 was not supported, so I had to patch [drupal_root]/sites/all/modules/wysiwyg/editors/whizzywig.inc to pick up the new format of the version numbering in whizzywig.js and the new name of the icons file, as per http://drupal.org/node/753536.

Editor features

WYSIWYG editors can have so many features, from the ability to nest lists to integrating with media libraries, that a full review is well outside the scope of this article.

To simplify, each editor was configured to have only a reasonable minimum of features useful for creating content. Any features that allow too much control over the look of the content were disabled, because they often encourage the creation of ugly pages (for example control over fonts, font colours and background colours).

Different editors support different features. The following three tables show show which features were enabled for each editor.

Note that jWYSIWYG didn’t have any button configuration options, so in addition to those highlighted below, it had underline, three header buttons and remove formatting.

Simple formatting

WYMeditor YUI editor openWYSIWYG TinyMCE jWYSIWYG Whizzywig NicEdit CKEditor markItUp
Bold Yes Yes Yes Yes Yes Yes Yes Yes Yes
Italic Yes Yes Yes Yes Yes Yes Yes Yes Yes
Strike-through No Yes Yes Yes Yes No Yes Yes Yes
Bullet list Yes Yes Yes Yes Yes Yes Yes Yes No
Numbered list Yes Yes Yes Yes Yes Yes Yes Yes No
Superscript Yes Yes Yes Yes Yes No Yes Yes No
Subscript Yes Yes Yes Yes Yes No Yes Yes No
Blockquote No No Yes Yes No No No Yes No
Horizontal rule No No Yes Yes Yes Yes Yes Yes No

I’ve not included Underline because an underline should indicate a link and we want to avoid the potential for confusing visitors by underlining text that doesn’t link anywhere.

Complex formatting

These are features that present some kind of dialog box because they require settings from the user (with the exception of Unlink, here because it’s related to Link).

WYMeditor YUI editor openWYSIWYG TinyMCE jWYSIWYG Whizzywig NicEdit CKEditor markItUp
Link Yes Yes Yes Yes Yes Yes Yes Yes Yes
Unlink Yes No No Yes No No Yes Yes No
Anchor No No No Yes No No No Yes No
Image Yes Yes Yes Yes Yes Yes Yes Yes Yes
Flash No No No No No No No Yes No
Table No No Yes Yes No Yes No Yes No

Note that Link and Anchor both create the anchor element, but Link creates an anchor that links to a different page or to a named anchor in the current page (AKA a fragment identifier) while Anchor creates a named anchor in the current page. In other words, Link creates <a href="... and Anchor creates <a name="....

Often the Link button will perform the Unlink and Anchor functions if separate buttons aren’t provided.

Layout

WYMeditor YUI editor openWYSIWYG TinyMCE jWYSIWYG Whizzywig NicEdit CKEditor markItUp
Align left No Yes Yes Yes Yes Yes Yes Yes No
Align center No Yes Yes Yes Yes Yes Yes Yes No
Align right No Yes Yes Yes Yes Yes Yes Yes No
Justify No Yes Yes Yes Yes No No Yes No
Outdent Yes Yes Yes Yes Yes Yes Yes Yes No
Indent Yes Yes Yes Yes Yes Yes Yes Yes No

The results

To allow all editors to be easily compared, I’ve tabulated the results and altered the questions so that an answer of “yes” is always good and “no” always bad.

Note that a quick test to see whether an editor generates inline styling is to see how it handles text alignment and images.

WYMeditor YUI editor openWYSIWYG TinyMCE jWYSIWYG Whizzywig NicEdit CKEditor markItUp
Markup validates? No No No No No No No Yes Yes
Image alt text? Yes Yes Yes Yes No Yes Yes Yes Yes
No blank alt text? No No No No No Yes No No No
No link target? Yes No No No Yes No No No n/a
No inline styling? Yes No No No Yes No No No Yes
No popup windows? No Yes No No Yes Yes Yes Yes Yes

The markup generated

For each editor, I clicked each button in turn and tried a small range of inputs. This was far from comprehensive, but sufficient to see which editors created valid markup and which didn’t.

To validate the markup generated by each editor I copied it into a basic web page with a DOCTYPE of XHTML 1.0 Transitional (I didn’t use the entire markup generated by my Drupal instance, as I’ve many different modules installed for evaluation).

  1. wymeditor_test.html
  2. yui_test.html
  3. openWYSIWYG_test.html
  4. tinymce_test.html
  5. jwysiwyg_test.html
  6. whizzywig_test.html
  7. nicedit_test.html
  8. ckeditor_test.html
  9. markitup_test.html

Markup quality

Most editors failed to generate markup that validated. However, this is a little misleading because some editors created clean markup that only failed validation because of one or two features that could be disabled or perhaps modified.

The next table tabulates some largely subjective ratings, as follows: A rating of ‘good’ means the markup was clean and validated, ‘ok’ means the markup was clean but didn’t validate for a minor reason, ‘bad’ means it was invalid and used unnecessary attributes but was otherwise neat, and ‘terrible’ means it was invalid, messy and littered with junk.

WYMeditor YUI editor openWYSIWYG TinyMCE jWYSIWYG Whizzywig NicEdit CKEditor markItUp
How good is the markup? Ok Terrible Terrible Ok Bad Bad Terrible Good Good

Ignoring the target attribute on anchors (which most editors would happily create and aren’t a problem for XHTML 1.0 Transitional), the following things struck me when inspecting the generated markup…

WYMeditor

  • Very good clean markup.
  • Only failed XHTML 1.0 Transitional and Strict because it can create images that don’t have the alt attribute.

YUI

  • All kinds of validation problems, from empty attribute values to missing tags.

openWYSIWYG

  • Didn’t nest lists properly.
  • Uses all kinds of odd attributes, like classname and prevstyle.

TinyMCE

  • Only failed XHTML 1.0 Transitional validation because it put a horizontal rule inside a paragraph. After correcting this I tried XHTML 1.0 Strict and it only failed because it allowed anchors to have a target attribute.

jWYSIWYG

  • Didn’t nest lists properly.
  • Uses line breaks instead of paragraphs hence can not validate XHTML 1.0 Strict.

Whizzywig

  • Didn’t nest lists properly.
  • The only editor that output markup on different lines (as opposed to one massive line) which made it easier to read.
  • Uses line breaks instead of paragraphs hence can not validate XHTML 1.0 Strict. Edit 21/03/2011: Uses line breaks instead of paragraphs when adding bold or italic text hence can not validate XHTML 1.0 Strict.
  • Set the image alt text to the image name (without filename extension) which is better than not setting any alt text, though it would be better if it refused an image unless the user had supplied some alt text.

NicEdit

  • Didn’t nest lists properly.
  • Used invalid attribute values.
  • Uses line breaks instead of paragraphs hence can not validate XHTML 1.0 Strict.

CKEditor:

  • Only failed XHTML 1.0 Strict because it allows the target attribute.

markItUp

  • Very limited feature set.
  • It seems to create Textile markup when editing, but even when you separate text with blank lines it doesn’t generate paragraphs (as Textile should), which as well as preventing it validate XHTML 1.0 Strict results in everything on a single line!

Popup windows

The editors used one of three mechanisms to display dialogs:

  • Popup windows: WYMeditor, openWYSIWYG, TinyMCE.
  • Javascript powered lightbox or inline dialog: YUI editor, Whizzywig, NiceEdit, CKEditor.
  • Javascript popup: jWYSIWYG, markItUp.

Inline styling

Only WYMEditor, jWYSIWYG and markItUp avoided inline styling.

WYMeditor and markItUp didn’t use inline styling because they only offer basic editing and don’t do alignment or anything else that often reply inline styling. jWYSIWYG achieved alignment by creating a surrounding div element and setting its align attribute.

Most other editors used inline styling for image sizing, margins, borders and alignment. Some used them for text styling.

OpenWYSIWYG made heavy use of inline styles for tables.

YUI was odd, in that its styling set font-family to yui-tmp on some paragraphs but not others!

Editor usage – first impressions

A few limitations, bugs and annoyances struck me when using the editors. My test browser was Firefox 3.6.8.

WYMeditor

  • Table handling is poor. For example you can’t easily delete a table nor add content after you’ve added a table (unless you create an extra paragraph beforehand).

YUI

  • Can’t do embedded lists.
  • The outdent button seems pointless, because it can only indent once, so the outdent button does the same as turning indent off.
  • Buggy when adding images that have text flow set – I couldn’t add content afterwards.
  • Status bar reports the tag nesting incorrectly.

openWYSIWYG

  • You can set table background and foreground colours, which ultimately gives the user too much potential to create ugly content.
  • Status bar reports the tag nesting incorrectly.

TinyMCE

  • Opens its dialog boxes as popup windows that resize to fit their content. In a tabbed browser that’s configured to open popups in new tabs this results in the entire browser being resized.

NicEdit

  • Doesn’t reliably cancel text formatting, like bold/italic/strike-through.

Shortlist knockout

Looking at the markup that’s rated as good or ok, our shortlist consists of WYMeditor, TinyMCE, CKEditor and markItUp.

markItUp is out because it requires the user to know Textile so is not suited to novice users.

WYMeditor is out because it can create images with no alternative text. I couldn’t find any mention on their web site or forums about how to add validation to the image dialog and it seems that the authors have no intention of adding it (a feature request has been submitted to their issue tracking system, but was rejected: #158). Also, WYMeditor can’t align images and it was frustrating to use because of its poor table handling.

Otherwise, I like WYMeditor, in particular the WYSIWYM concept, the author’s focus on simplicity and XHTML and the fact that it’s released under the MIT license. It’s definitely one to keep an eye on.

TinyMCE is out, because although it produces valid markup with its Horizontal Rule button disabled, its popups resize my browser and makes editing extremely annoying due to the constant need to undo the resizing. If that weren’t the case then there would be little to choose between TinyMCE and CKEditor.

The winner – CKEditor

The winner is CKEditor. Its markup validates and it uses lightboxes instead of popup windows for dialogs.

It is possible to configure CKEditor to remove many of its more complex options and validate important ones, like ensuring an image’s alternative text has been set. I’ll soon write an article about how to customise CKEditor to achieve this.

It supports Drupal’s IMCE module via the IMCE WYSIWYG bridge module (as does TinyMCE), which means you can use Drupal’s most stable media browser (unfortunately the Node Reference / Embed Media Browser module, which seems promising, was simply too buggy when I tried it).

The end result is an editor that creates valid, accessible markup, is simple to use and avoids excessive inline styling.

Posted by Stephan on 09/08/2010.


Comments

Oscar Calvo said on Wednesday, December 29, 2010:

Hello. It’s a good review.

But, I think that the best editor is that who help the users to do their work, some people can prefer ckeditor, another tinymce, etc… So, if my customer prefer a really small and easy editor why I’ll give a big one like ckeditor or tinymce?

Anyway, it’s a great article.

Oskar

Ellen said on Thursday, January 06, 2011:

Thanks for this – the lack of an easy to use, simple to configure, multi-browser-compatible wysiwyg text editor is one of the biggest obstacles to adoption of Drupal that I know of.

As far as I can tell, there IS no editor that is compatible with Safari, Chrome, Firefox on both platforms, and IE7, 8 on the PC. And that can do image upload in a SIMPLE manner for novice users.

Beren Erchamion said on Sunday, January 09, 2011:

Nice writeup! It is pretty amazing that Drupal has not yet included something in the core as a full featured editor.

Alexandra said on Monday, January 10, 2011:

What Ellen said.

Sue Mildrum said on Monday, January 17, 2011:

Thanks for all the work you put into this review! I appreciate it as I went through a similar (though less exhaustive) exercise myself a few months ago.

Like you, I landed on CKEditor. But then I discovered that if the user needed to upload images into their content I would need to purchase CKFinder for $59/site. Based on that, I chose to go with TinyMCE.

Unfortunately, I’ve had problems getting TinyMCE to work predictably. Before I invest a lot of time into troubleshooting it, I would be open to going back to CKEditor but only if file uploads can be done for no extra cost.

Do you (or anyone else) know if that’s possible?

Thanks!
Sue

Chris Burgess said on Monday, February 21, 2011:

@Sue, to do uploads with CKEditor using all-free ($) software, we use CKEditor RTE and modules Wysiwyg, IMCE + IMCE Wysiwyg Bridge (linked from the final paragraph of the article).

Vincent Kleijnendorst said on Tuesday, February 22, 2011:

What kind of configuration did you use with TinyMCE?
Every implementation I know uses “lightbox” functionality. Even the demo page at http://tinymce.moxiecode.com/tryit/full.php uses the model dialogs with Javascript.

If you review TinyMCE again with this configuration, I’m sure the resulting conclusion will be much different.

With allowed tags and attributes you can also force users to use a rel="" instead of a target. You will then need to use Javascript to open links in a new window If you like to open anchors in new windows.

Cozzi said on Sunday, March 06, 2011:

Sue, I think this article will help you with your option to upload images with CKEditor:
http://groups.drupal.org/node/46950

Stephan said on Monday, March 07, 2011:

Thanks everyone for your comments.

Oscar: I agree that a light weight editor would be ideal and I certainly favour them myself, but there don’t seem to be any available that prevent the creation of invalid / inaccessible markup, have an image/file browser and require no technical knowledge to use effectively.

Ellen: I completely agree. I was hoping that Drupal 7 would introduce a nice basic editor by default, but unfortunately it hasn’t. I’ll be looking at the nrembrowser module again in the hope that its bugs have gone away, as it seems to be a promising alternative to IMCE.

Sue: As Chris mentioned, you can use IMCE with IMCE WYSIWYG Bridge to get a free media browser. It works but it’s not very pretty and does unfortunately have annoying popups. I also recommend using the CKEditor Link module to simplify linking to nodes.

Vincent: I just used the default configuration. I’m pleased to hear that TinyMCE offers lightbox feature, as I’ve been using TinyMCE with a different CMS and it’d be nice to reduce the number of applications I have to support. Looks like I’ll have to investigate TinyMCE again :-)

Paul said on Thursday, March 10, 2011:

I’m a bit puzzled about some of your results. You say the Whizzywig produces line breaks instead of paragraphs, but ver. 61 does not. It produces paragraphs. Are you sure you used v61?

Stephan said on Monday, March 21, 2011:

Paul: I’ve done another test and you’re right, Whizzywig 61 does create paragraphs, but unfortunately it also has an oddity whereby it creates line breaks if using bold or italic text. I’ve updated the article accordingly.

Logan said on Saturday, May 28, 2011:

Excellent review, thanks for taking the trouble to do it.

Tan said on Wednesday, November 09, 2011:

Thanks buddy. Pretty need job. Wish you good! On my way to upgrading my little website.

Mike Gifford said on Sunday, March 04, 2012:

Interesting to see how things have changed since August 2010 & March 2012:

WYMeditor – 0.5 rc 2 : same
YUI editor 2.8.1 – : 3.4.1
openWYSIWYG – 1.4.7 : same
TinyMCE – 3.3.8 : 3.4.9
jWYSIWYG – 0.6 : same
Whizzywig – 61 : 63
NicEdit – 0.9 r23 : same
CKEditor – 3.3.1 : 3.6.2
markItUp – 1.1.7 : 1.1.12

Sahure said on Friday, April 13, 2012:

Nice post. FYI, MarkItUp is NOT a WYSIWYG editor. It simply enhances the usability of the element by adding buttons and allowing the quick writing of syntax. It doesn’t hide the code at all. May be you shouldn’t have used it at all in this analysis.

P.S: Your review of WYMeditor is an eye-opener. I’ve just started using it. But I do love it’s look and the “visual” structure it shows in editing mode. It’s not a WYSIWYG editor though. It’s a WYSIWYM editor. Semantics matter more than aesthetics from its design goals.

Adam said on Saturday, May 19, 2012:

Regarding your tests: alternative text must be optional in any text editor because some HTML images should not have alternative text. This misperception is quite common, and probably stems from the requirement for the alt attribute, but it should in some instances be left blank.

Other than that small error, this is quite a useful article.

Incidentally, you ought to change your anti-spam comment question for something more sensible, such as one that can be answered without needing to ask a sighted person (as I did). Please remember that what is obvious to you may not be obvious to some of us.

Comments closed.