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

Question

以下是演示:

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

当我使用Firebug检查源代码时，发现它只是一个iFrame，但是如何使iFrame具有文本区域的行为呢？你有什么实现的想法吗？谢谢。

- Tattat

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
• 如我所说，我对此进行了有限的研究，因此请帮助我纠正任何错误 :)

- gak

Answer 2

在该框架中，您可以看到完整的HTML源代码，构建了类似于文本区域+工具栏+其他内容的东西。复杂的Javascript在背后完成所有技巧。例如，如果您使用工具栏选择一些文本并将其加粗，那么脚本会在您的文本周围放置标签等等。

- jabal

---

是的，代码已经压缩了，这就是为什么我在stackoverflow上提问XD。但我认为他/她没有处理keypressed事件，因为我看到光标在闪烁。 - Tattat

你可以轻松地解压从http://www.strictly-software.com/unpacker网站下载的richtext_compressed.js文件。 - jabal

当然是键盘按下事件：h.addEventListener("keypress", geckoKeyPress, true)。 - jabal

但是闪烁的光标怎么解释呢？ - DNB5brims

isContentEditable CSS 属性在 IFRAME body 上为 true。请点个赞 :-) - jabal

Answer 3

使用http://www.tinymce.com/。它是最好的富文本编辑器之一，与任何浏览器都能很好地配合，并拥有许多选项。非常易于使用，只需要查看示例和文档即可。它还包含在许多流行的博客和CMS中。

- gorlok

---

我知道有很多富文本编辑器可用，但我想实现自己的编辑器。所以，只是想了解背后的思路。 - Tattat

他并没有要求其他编辑器，他只是想知道它是如何工作的！ - jabal

哦，好的。你必须动态创建编辑器的DOM。让它在每个浏览器上都正常工作并不容易。我建议你查看一些库的源代码，这样你就可以有一个想法了。 - gorlok