How to implement a Rich Text Editor in HTML?

Question

Here is the demo:

http://www.kevinroth.com/rte/demo.htm

when I use firebugs to inspect the source code, I see that it is iFrame only, but how can the iFrame have a text area behavior?? Any ideas on how to implement this? Thank in

Answer 1

As I'm doing this for my job right now, I've done a small amount of of research. From what I have figured out, there are two ways to accomplish this:

document.designMode

Using document.designMode in JavaScript which sets the whole HTML document to be editable. As the whole HTML document is editable, presumably an iframe is needed to encapsulate the editing, so that the user can't edit any part of the page you don't want editing.

From what I can tell, the demo you linked and TinyMCE uses this method.

contenteditable

The contenteditable HTML attribute is similar but doesn't require an iframe to be used. You add the attribute to a tag and all of the HTML within it becomes editable with a blinking cursor.

Here is a demo of it: http://html5demos.com/contenteditable

---

Notes

• Personally I'll be looking at contenteditable for my task. Here is good overview and details on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
• As I say I have done limited research on this, so please help me correct any errors :)