How do online rich text editors work? How do online rich text editors work? javascript javascript

How do online rich text editors work?


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.


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.


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.