How do Rich Text Editors in HTML documents achieve their rich text formatting?

Question

Could you please explain how the text in the textarea gets styled in rich-text editors? I've tried to style text in the form but it doesn't change.

Is it JS that recognizes characters typed by the user? How's that done?

---

Edit:

After a bit of research (Google rules!), I've found some excellent information. For others who might be interested, these links were very helpful to me:

• http://www.webreference.com/programming/javascript/gr/column11/
• http://www.webreference.com/programming/javascript/gr/column12/

Answer 1

Usually, the rich text editor will provide a variable to specify a style sheet in. That style sheet will then be loaded and applied to the textarea (Most, if not all, rich text editors use a IFRAME to display the editor in, and obviously styles specified in the main document won't apply to it.)

Answer 2

I think the answer is that what you're looking at is typically NOT an actual <textarea>. It's a <div> or <span> made to look like a text area. A regular HTML textarea doesn't have individual formatting of the text.

"Rich-Text editors" will have controls that modify the contents of the span/div with regular html markup (<strong>, <em>, etc.) to emulate a full-blown rich text editor

Answer 3

It's a textarea when you send the HTML to the user but the editor replaced it with a div when it can start.

This way, the code gracefully degrades: Users with unsupported web browsers or disabled JavaScript can still edit the text in the textarea while all the other users get a nice rich text editor.

Answer 4

Basically, the TEXTAREA contents are used as the HTML source for the IFRAME.