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)?

Kipton

Use your curiosity to motivate you to just open up the source code in your favorite editor and start exploring. Since these editors are written in JavaScript the answers are free for the looking. I realize you are looking for something more easily digested, but reading the source code can be very rewarding. Starting to build an editor could be as simple as taking an existing open source editor and modifying it to meet your own special needs. – Finney

IIRC, the iframe is to make Firefox play nice. – Lith

If you want to write a JavaScript text editor, then you might need to obtain the HTML of the selected text in a document, as described here: #5644135 – Kendre

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.

Kipton

This has helped me immensely. Currently I am commenting on a heavily-modified version of your answer after some experimentation :) – Twicetold

Thank you for asking and then answering your own question, it's exactly what I was after. – Tohubohu