Search code examples
javascriptrichtextboxwysiwyg

How do online rich text editors work?

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?

Solution

  • 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.