How to implement Rich Text Editor in HTML?

Question

Here is a demo:

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

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

Answer 1

Since I am doing this for my work right now, I have done a small amount of research. From what I found out, there are two ways to do this:

Document.designMode

Using document.designMode in JavaScript, which allows you to edit the entire HTML document. Since the entire HTML document is editable, presumably an iframe is required to encapsulate editing so that the user cannot edit any part of the page that you do not want to edit.

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

contenteditable

The contenteditable HTML attribute is similar, but does not require the use of an iframe . You add the attribute to the tag, and all the HTML inside it becomes editable with a blinking cursor.

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

---

Notes

• Personally, I will be looking contenteditable for my task. Here is a good overview and detailed information on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
• As I said, I did a limited study on this, so please help me fix any errors :)

Answer 2

In this frame, you can see the full HTML source, which creates what looks like a text area + toolbar + material. Sophisticated Javascript does the trick. For instance. if you select some text and make it bold from the toolbar, than the script place the <strong> tags around your text, etc.

Answer 3

Use http://www.tinymce.com/ This is the best rich editor. Works great with any browser, and it has many options. It is very easy to use. Just take a look at the examples and documents. It included many popular blogs and CMS.