如何在HTML中实现富文本编辑器？

Question

这是演示：

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

当我使用firebugs来检查源代码时，我发现它只是iFrame，但iFrame如何才能有文本区域行为？ 有关如何实现这一点的任何想法？ 谢谢

Answer 1

我正在为我的工作做这件事，我做了一些研究。 根据我的想法，有两种方法可以实现这一目标：

document.designMode

在JavaScript中使用document.designMode ，它将整个HTML文档设置为可编辑。 由于整个HTML文档是可编辑的，因此可能需要使用iframe来封装编辑，以便用户无法编辑您不想编辑的页面的任何部分。

据我所知，您链接的演示和TinyMCE使用此方法。

CONTENTEDITABLE

contenteditable HTML属性类似，但不需要使用iframe 。 您可以将该属性添加到标记中，并使用闪烁的光标将其中的所有HTML变为可编辑。

以下是它的演示： http ： //html5demos.com/contenteditable

---

笔记

• 就个人而言，我会contenteditable于我的任务。 以下是关于该主题的良好概述和详细信息： http ： //blog.whatwg.org/the-road-to-html-5-contenteditable
• 正如我所说，我对此做了有限的研究，所以请帮我纠正任何错误:)

Answer 2

在该框架中，您可以看到一个完整的HTML源代码，它可以构建一个看起来像文本区域+工具栏+东西的东西。 一个复杂的Javascript正在做所有的技巧。 例如，如果您选择一些文本并使用工具栏将其加粗，那么脚本会在文本周围放置<strong>标记等等。

Answer 3

使用http://www.tinymce.com/这是最好的编辑器。 适用于任何浏览器，它有很多选项。 它非常易于使用。 只需看看示例和文档。 它包含在许多流行的博客和CMS中。