javascript Rich Text Editors [closed]

Question

There are several (very good) rich text web editors written in Javascript (eg FCKeditor, YUI Texteditor and many many others).

However I couldn't find any tutorial on how to build such a component. Something that would explain both high-level considerations (architecture) and/or more details in low-level "critical" points (ie why do most of the editors out there use iFrame, how do you handle keyboard input like Ctrl-B, Ctrl-C when the text is selected and when it is not etc)

My main motivation is curiosity; if I had to develop such an editor today I wouldn't know where to start from.

Does anyone know of any tutorial that covers the above issues (ideally, something that explains how to build a wysiwyg editor from scratch)?

Answer 1

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.