contentEditable is the HTML5 feature that enables rich text editing on web pages. The original web browser that Tim Berners-Lee created was also a web editor, and contentEditable brings this possibility to all browsers.

The idea was that anybody who used the web would have a space where they could write and so the first browser was an editor, it was a writer as well as a reader. Every person who used the web had the ability to write something. It was very easy to make a new web page and comment on what somebody else had written, which is very much what blogging is about.

There are some great rich text editors built on top of contentEditable, the open source Aloha Editor being my personal favorite.

But in some situations you’ll want a different user experience than this CMS-oriented tool. For those situations, here is a list of resources about rolling your own web editors:

• Rich HTML editing in the browser, part 1
• Rich HTML editing in the browser, part 2
• Rich Text Editing in Mozilla
• Finding cursor position in contentEditable
• jQuery Clean, HTML cleaning library

I’m using these resources in building Hallo, a simplistic rich text editor written in CoffeeScript on top of jQuery UI.

Note: unfortunately some popular mobile platforms like iOS do not support contentEditable correctly. If you need to support mobile editing, then the Richie editor might be of interest.