javascript Rich Text Editors [closed]

After more research I found the following. The functionality for building a rich-text-editor is already implemented at the browser. IE was the first to create such an API and Firefox replicated it.

Overview

The main point is that the javascript object "document" has a property called designMode which can be set to "on". This converts all the page to to a textarea-like component. Imagine that the browser opens the page the same way that MS-Word would: the user can see the formatting but he can also type in the page (normally the browser opens a page as readonly).

window.document.designMode = "On";

Because the above affects all the web page, most editors use iFrames so that the editable area is only the iFrame which has it's own document object.

On top of that, there is an API that allows easy javascript access to styling. This is exposed throw the execCommand() method. For example you can call from Javascript

document.execCommand('bold', false, '');

and the selected text will become bold.

Tutorials

I have found the following:

A brief step by step guide.

A mozilla guide. It has the most convenient API reference I have found and also some more links.

A guide by microsoft.