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

以下是演示：

---

当我使用Firebug检查源代码时，我看到它只是iFrame，但是iFrame怎么会有文本区行为呢？？关于如何实现这一点有什么想法吗？感谢在

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

标记等等。

使用它是最好的富编辑器。适用于任何浏览器，它有许多选项。它很容易使用。只需看看示例和文档。它包含在许多流行的博客和CMS中。

因为我现在是为了工作而做的，所以我做了少量的研究。据我所知，有两种方法可以实现这一点：

document.designMode 在JavaScript中使用

document.designMode

，将整个HTML文档设置为可编辑。由于整个HTML文档是可编辑的，因此可能需要一个

iframe

来封装编辑，这样用户就不能编辑页面中任何不需要编辑的部分

据我所知，您链接的演示和TinyMCE使用了这种方法

内容可编辑

contenteditable

HTML属性类似，但不需要使用

iframe

。将属性添加到标记中，其中的所有HTML都可以通过闪烁的光标进行编辑

下面是它的一个演示：

---

笔记

• 就我个人而言，我将在我的任务中查看

  contenteditable

  。以下是关于该主题的良好概述和详细信息：
• 正如我所说，我在这方面做了有限的研究，因此请帮助我更正任何错误：）

---

我知道有富文本编辑器，但我想实现自己的富文本编辑器。所以，我只是想知道背后的想法。他没有要求其他编辑，他想知道它是如何运作的！哦，好的。您必须动态创建编辑器的DOM。让它在每个浏览器上正常工作并不是一件小事。我建议你检查一些库的源代码，这样你就可以想出一个主意。但是框架如何有文本区域，我用Firebug检查了他们的源代码，似乎框架上没有文本区域。我认为它捕捉到没有任何文本区域的键盘事件。直接处理按键事件。然而，代码被压缩得很难看清真相。是的，代码被压缩了，这就是为什么我在stackoverflow XD上问它。但我认为他/她不会处理按键事件，因为我看到光标在闪烁。你可以很容易地解包richtext_compressed.js，可以从网站下载它的按键事件：h.addEventListener（“按键”，geckoKeyPress，true）