How do online rich text editors work?

Question

I was wondering how online rich text editors maintain the formatting when you paste text from a webpage or document. A standard textarea box only takes text while these WYSIWYG editors seem to use a DIV. How does it work?

Answer 1

WYSIWYG Editors actually build on top of basic HTML Editing functionality that the browsers already have built in. In Firefox, the technology is called Midas. In IE, contentEditable.

Answer 2

Online rich text editors use contentEditable or designMode to take advantage of the browser's native support for HTML editing. When you paste into a contentEditable or designMode element, the browser puts HTML directely into the element. Try it yourself by pasting into Midas Demo and then using Firebug's inspect element to look at the HTML you pasted.

JavaScript applications can use the execCommand method to format the user's selection in a rich text editor.

Answer 3

By using existing browser capabilities (IE - ContentEditable). This allows the developer to let the user edit html directly. They usually use an iFrame to separate the editable section from the rest of the page, but this is not required.

Then the developer can simply read the html source of the iframe (or whatever) and they're done.