WYSIWYG HTML Editors
A Comparison of HTML Editing Controls
I’m working on a project that includes a lot of content management features. In the past, I’ve always avoided WYSIWYG HTML editors, because they’ve been ugly, buggy, and incompatible with many browsers. But things have changed a lot since I last looked at them, and I’m trying to keep up with the times. The non-technical users this project is aimed at will definitely appreciate being able to edit their pages without resorting to Markdown, so I decided to round up the most promising candidates and take another look.
My criteria for what makes a good editor are based on my own opinions and the needs of my current project, so my conclusions may not be applicable to everyone. Generally speaking, what I’m looking for is a true “WYSIWYG” experience (the user doesn’t have to mess with the HTML directly). I also want it to look as pretty as possible — working on a Mac, I have an immediate and visceral reaction to ugly software. Users are going to want links and pictures, so it would be nice to have something more than just “Enter Image URL”. I’m going to have to plug in some custom code to handle uploading and hooking into my image library, so the more support the editor gives for this, the better. And, painful as cross-browser support is, it’s going to have to work in IE6+, Firefox, and Safari.
On to the editors…
markItUp!
http://markitup.jaysalvat.com/
I included markItUp! because it looks very nice as a code-level editor. But it is specifically not designed to do WYSIWYG — while you can open a preview, you’re editing the HTML (or Markdown, or many others) directly, with some assistance from the toolbar buttons. It also has a fairly pretty “OS X” skin available. I am, however, in the market for a WYSIWYG editor, so I can’t fairly include markItUp! in the comparison.
HtmlBox
http://remiya.com/cms/projects/jquery-plugins/htmlbox/
The looks: Not terribly ugly.
The good: Seems to support assigning CSS classes. The demo has some nice examples of float-right callout boxes, etc.
The bad: Suffers a bit from too many buttons, and I don’t know why they put those fake drag handles on the toolbars. It’s not immediately obvious from the web site what kind of configuration options, themes, etc. might or might not be available. Images and links are only supported by “Enter URL” popups.
Conclusion: Not especially compelling.
WYMeditor
The looks: Almost actually kind of pretty.
The good: Rather than being directly WYSIWYG, it has a nice structural view of the document, with boxes around block elements. I like the way this works a lot. Even more compelling is the way it uses CSS classes to assign style. If you want a word processor-like editor, where the user can change the font and color of every character individually, this may not be the control for you. But in my application, it would work very well if the users were provided with a handful of pre-defined classes to choose from, so they could just mark a paragraph as “important”, rather than messing with the font and color settings. Nice table editor, as well.
The bad: The method of assigning containers and classes is confusing and doesn’t fit in with the otherwise attractive look of the editor toolbar. I know it’s trying to do the right thing, but the user experience seems to suffer somewhat. No real help for uploading images and setting up links, pretty standard popup window with URL fields for that.
Conclusion: Very tempting, but I think I’d have to hack on it a bunch to get everything I want.
FCKeditor
The looks: Seems to be copied from Word 95. This is the editor that set the standard for massive, ugly, cluttered toolbars.
The good: It seems to work ok. I really can’t get past the interface to consider it any further.
The bad: Terribly unfortunate name. Terribly unfortunate design. And it’s not just looks: a lot of those buttons pop up confusing and badly laid-out dialogs, which fits in with the Windows theme.
Conclusion: Functionality’s there, but I need something that looks better.
TinyMCE
The looks: Holy button overload, Batman.
The good: TinyMCE is the editor I’m writing this in, as it’s the one used by WordPress. It has a lot of users and is therefore likely to be very well supported and tested across lots of browsers. It doesn’t look terrible, and to be fair, one doesn’t have to enable all of those buttons. When you’re inserting images and links, there are nice popup dialogs that make the process easier. And it integrates with jQuery, my Javascript library of choice.
The bad: I’ve seen some visual glitches while writing this, but that may be due to the oddball version of Safari I’m using.
Conclusion: Definitely a contender.
YUI Editor
http://developer.yahoo.com/yui/editor/
The looks: Pleasant enough.
The good: YUI Editor is simple and clean, with an extensible plugin architecture that I could definitely see making use of. It also has nice dialogs for images and links. There’s a video right on the YUI Editor home page that explains the design and extension principles, which really sold me on it.
The bad: YUI is big, and I’d already made the decision to go with jQuery. I’ve never been a fan of the button style either, it looks a bit like KDE or something, definitely out of place on the Mac.
Conclusion: I think YUI Editor is my top choice, design-wise.
Wrap Up and Final Conclusion
It’s definitely down to either TinyMCE or YUI Editor. It’s a very difficult decision. TinyMCE definitely has more features and a very active community behind it. YUI Editor is more to my liking aesthetically, both from a frontend look and a code perspective. I’m having so much trouble making the final call, I’m going to have to try to integrate them both and see which one gives me less trouble. I’ll be starting with YUI Editor, so expect a followup article soon documenting the experience.
Feel free to chime in in the comments if you have any experience integrating an HTML editor, especially if it’s one of these.
Leave a Reply