如何在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 :)

Answer 2

In that frame you can see a full HTML source that builds up something that looks like a text area + toolbar + stuff. A complicated Javascript is doing all the trick behind. Eg if you select some text and make it bold with the toolbar than the script places <strong> tags around your text and so on..

Answer 3

Use http://www.tinymce.com/ It is the best rich editor out there. Works great with any browser and it has many many options. It's very easy to use. Just look at the examples and docs. It's included with many popular blogs and CMS.