The Label

"Tasty! No Trans-Fats."

I've now worked with a number clients who have a taste for a "rich text" editor experience. Each time, the team initially looked in to using an off-the-shelf package, e.g.:

• TinyMCE
• FCKeditor
• WysiHat

Each of these client projects had fairly basic needs. Pretty much everyone wants "bold", "italic", "underline". Throw in bulleted and numbered lists and perhaps a few other trinkets and you've pretty much covered the use cases.

It turns out that the existing packages are generally tricky to integrate and modify or configure per your particular needs. This makes sense. A full-blown Javascript RTE package needs to have capabilities far in excess of anything a given project requires, simply in order to meet every project's requirements. You end up with a massive library that is not trivially integrated into your site. What to do some TDD/BDD on the RTE interaction with your page? Good luck.

So, I've generally suggested that we roll our own.

I know, crazy. Why write something new and custom when so many others have already solved all of the issues with, for example, cursor movement and text editing and command handling (e.g., making the text "bold") and image placement, and...?

Well, it turns out that all of that behavior is already built in to the browser. Yes, my browser, your browser. Pretty much every browser you need to care about¹. On top of that, the basics are extremely simple.

To many, this may not be news at all. The basic capability has been around since MSIE 5.5 was released in 2000. On the other hand, I've worked with a number of very smart and seasoned web developers who were unfamiliar with the extent to which it is the browser, rather than the libraries, that has taken care of the hard parts.

Ingredients

What you'll need to make this work²:

// enable editing:
document.contentEditable = true;
document.designMode      = 'on';

// make something bold:
document.execCommand('bold', false, []);

It's pretty much as simple as that. Give it a try: paste the following snippet into your browser's address bar, hit enter, and edit text or resize images on this page to your tummy's delight.

javascript: function enable_DM() { document.contentEditable = true; document.designMode = 'on'; }; enable_DM();

Preparation

So, with those ingredients we can make quite a mess of the page we're visiting, but we've hardly created a delicious RTE. To go the next step, we need a way grab the HTML representation of our edited content to send with a form submission.

The basic idea here, which is what every editor out there employs, is to embed an <iframe />, the document of which is editable, and when appropriate copy the HTML of that document to a (likely hidden) textarea within your form.

Why an iframe? There are two important reasons:

1. You probably want to protect the look and behavior of your edited document from the styles and scripts of the rest of your site.
2. Until version 3, Firefox only supported designMode, which is applicable to the document, but not to an element within your page.

There are slight browser differences that will come in to play, e.g. MSIE's IFrameElement.document property versus Firefox's (and the W3C standard) IFrameElement.contentDocument. As long as your editor remains fairly simple these intricacies will cause very little trouble.

I'll leave it to you to hook things up to your liking, but will toss in this morsel: On a current project, we're using a home-baked RTE which, from 100 very-nicely-formatted lines of Javascript (not counting the supporting jQuery and Disco libraries), is providing...

• DOM building of the iframe and command toolbar (<ul /> with "buttons"), etc.
• Document editability
• Registration and handling of 8 commands (e.g., "bold", "italic", "indent")
• Content transfer to-and-from an associated textarea
• Additional helpers (e.g., get the currently-selected text as HTML)

Tasting Notes

• ¹ My apologies to visitors using a specialized browser for accessibility.
• ² Setting document.designMode should be enough, but there are reports of discrepancies in MSIE's handling of the two.

Shopping List

• An MDC article on Mozilla's Implementation
• Another MDC article, highlighting some differences with MSIE
• An MSDN article on MSIE's Implementation
• Mark Finkle on contentEditable in Firefox 3