WYSIWYG is Hard!

Why I'm Switching to TinyMCE

It's really hard to build a good wysiwyg ("what you see is what you get") editor.  Specifically, I'm talking about a browser-based editor -- one that doesn't require the user to install any extra software.  I'm sure other types of wysiwyg editors are hard too, but I don't have experience with those.

For the past few years I have been maintaining a wysiwyg editor as part of Modern Signal's Lighthouse CMS.  I have even been proud of it from time to time, because I have thought that it does some things really well, and has some unique solutions to some problems that I haven't seen in other editors.  Occasionally, though, I think about dumping it.  There are a number of reasons for this:

• I don't have much time to work on it, and as a result it's lacking a lot of the features that other editors have.
• I know that I need eventually to support WebKit-based browsers (Safari, Chrome) eventually.  After the pain of adding support for Firefox, I'm not looking forward to learning about all the new quirks I will have to deal with.  Since Webkit uses a lot of the same APIs as Internet Explorer and Firefox, it probably wouldn't be as hard as supporting Firefox was, but, again, I just don't have much time.
• There are some persistent cross-browser compatibility problems that are really hard to solve.
  

There is one specific problem that I'm thinking of.  If you create a simple editable document in Internet Explorer, and you put your cursor in there and hit enter, you will get a new paragraph, with space between the last location of your cursor and the new one.  If you do the same thing in Firefox, it inserts a simple line break instead -- no new paragraph and no extra space.  This is a problem for a number of reasons, but the main reason is that if you want to apply a stylesheet rule to a paragraph, it works fine in IE but not in Firefox.  And then if you have one person using IE and one person using Firefox, confusion ensues.

The two premier open-source wysiwyg editors out there, TinyMCE and CKEditor have handled this by forcing Firefox to act more or less like Internet Explorer by default.  I think that is the best solution.  I put some code in my wysiwyg to do that too, but it doesn't work all that well.  If I really had a lot of time, maybe I could come up with the right code to make this work well (again the problem with time).

Anyway, I've decided that it's time to transition over to a new editor.  I have settled, after some internal debate, on TinyMCE, because it seems to handle this Firefox/IE stuff in a very solid way, and it also seems to have a very nice extensible architecture.

Now, of course, I have a bit of heavy integration work to do.  A number of the tools in the Lighthouse wysiwyg are tailored specifically to work with Lighthouse, so I will need to incorporate those into TinyMCE.  The other big thing is that in the Lighthouse site editor, there is a single toolbar for all editable areas on the page, and all of the editable areas automatically expand to the size of the content.  This may be tricky to implement with TinyMCE.  But I feel pretty confident that in the long run using TinyMCE will save me a few gray hairs, and ultimately make Lighthouse better than it would otherwise be.

Even before the integration work is done for the site editor, Lighthouse will use TinyMCE to replace textareas in admin tools for Safari, Chrome, and Opera (yep, TinyMCE supports Opera too).  It's a basic implementation, but better than a plain textarea, which is what you saw previously in those browsers.