I’m working on a user-friendly content management system (Wiki-based, for those who care), and I wanted to add a WYSIWIG editor interface, like HTMLArea has, for example.
So, I dug through the javascript source code to find out how they do it. Obviously there’s some real deep magic involved, right? After all, some people pay a lot of money to use things like this on their web page.
So what did I find? Magic? No. It’s all built into the browser. Internet Explorer and and Mozilla-based browsers both have an “editable” mode that handles all the excitement. Microsoft calls their version The MSHTML Editing Platform, while Mozilla has a built-in module called Midas.
What you’re really paying for is that nifty toolbar that allows you to send commands to the browser that say “make this bold” or whatever. It seems almost dishonest for these vendors to brag about all the “features” they’ve included in their version (like “Fonts!”, “Sizes!”, and “Images!”), when it’s actually all provided as part of the browser… which the user already owns. Aw well, welcome to the world of Marketing.
Just for a heck of it, I created an editable version of my own homepage. It’s just the normal page, but with an extra line of JavaScript tacked on the end to turn on editing mode. Note that if you’re using a Mozilla-based browser (like Firefox), it seems to want to stay in editing mode even when you go to another page. You’ll have to close the current tab (or window) to get out of editing mode, since I don’t have a button on the page to turn it off.