HTML 文档中的富文本编辑器如何实现其富文本格式？

Posted 2023-02-21

【中文标题】HTML 文档中的富文本编辑器如何实现其富文本格式？

【英文标题】：How do Rich Text Editors in HTML documents achieve their rich text formatting?

【发布时间】：2010-12-21 09:33:44

【问题描述】：

您能否解释一下 textarea 中的文本如何在富文本编辑器中设置样式？我尝试在表单中设置文本样式，但它没有改变。

是识别用户输入的字符的JS吗？这是怎么做到的？

---

编辑：

经过一番研究（Google 规则！），我发现了一些极好的信息。对于其他可能感兴趣的人，这些链接对我很有帮助：

http://www.webreference.com/programming/javascript/gr/column11/ http://www.webreference.com/programming/javascript/gr/column12/

【问题讨论】：

你能给我们一些代码吗？

joerage：只问了 4 个问题……虽然肯定不好，但与那些不接受数十或数百个问题答案的人相比，这仍然是一种不同的事情。

@Johannnes：它更像是问了 12 个问题。如果你算上他提供的唯一答案，实际上是另一个问题，那就是 13。

没有。嗯，有什么概念吗？好吧，随便。我也要学习这个概念吗？

措辞不当的问题和 OP 的不当态度：我投票结束（一旦问题被改写，我会立即撤销）。

【参考方案1】：

通常，富文本编辑器将提供一个变量来指定样式表。然后，该样式表将被加载并应用于文本区域（如果不是全部，大多数富文本编辑器使用 IFRAME 在，显然主文档中指定的样式将不适用于它。）

【讨论】：

据了解，JS 将 textarea 替换为 IFRAME...是 iframe 类型的 textarea 吗？

在 IFRAME 中是一个单独文档的窗口。 textarea 本质上是没有意义的，它只是用作数据容器，以便可以通过表单保存编辑的内容。你用的是什么所见即所得的编辑器？

我不使用任何...那么，是识别用户输入的字符的JS吗？效果如何？

【参考方案2】：

我认为答案是您所看到的通常不是实际的<textarea>。这是一个<div> 或<span>，看起来像一个文本区域。 常规的 HTML 文本区域没有单独的文本格式。

“富文本编辑器”将具有使用常规 html 标记（<strong>、<em> 等）修改 span/div 内容的控件，以模拟成熟的富文本编辑器

【讨论】：

很难知道 TinyMCE 做了什么，但在这个例子中它使用了一个文本区域：tinymce.moxiecode.com/examples/full.php

另一种常见的技术是在 textarea 的顶部放置一个 iframe。

【参考方案3】：

当您将 HTML 发送给用户时，它是 textarea，但当它可以启动时，编辑器将其替换为 div。

这样，代码会优雅地降级：使用不受支持的 Web 浏览器或禁用 JavaScript 的用户仍然可以编辑 textarea 中的文本，而所有其他用户都可以获得一个不错的富文本编辑器。

【参考方案4】：

基本上，TEXTAREA 内容用作 IFRAME 的 HTML 源代码。