html - 如何在 HTML 文本区域中显示样式

Question

我正在尝试在文本区域内添加不同的样式，例如粗体、不同的颜色等

网页中使用的所见即所得编辑器(例如 tinyMCE)通常会执行此操作，但我无法弄清楚它们是如何执行的。

你不能这样做:

alt text http://www.yart.com.au/test/html.gif

那么他们是如何实现的呢？

Answer 1

欧文的想法是正确的。这些库将 textarea 替换为 iframe，然后将 iframe 的文档放入 designMode或 contentEditable模式。这实际上使您能够在 iframe 中编辑 html 文档，而浏览器则为您处理光标和所有击键，并为您提供一个可以调用以进行样式更改(粗体、斜体等)的 api。然后，当用户提交表单时，他们将 innerHTML 从 iframe 复制到原始文本区域中。有关如何启用此模式以及您可以使用它做什么的更多详细信息，请参阅:https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla

但是，如果您希望在您的站点上使用此功能，我建议您使用现有的富文本控件库之一。我之前构建过一个，发现您将花费大量时间来处理浏览器的不一致问题，以获得运行良好的东西。除了启用编辑功能的方式不同之外，您还需要规范化创建的 html。比如IE创建<br>当用户按下 enter 并且 FF 创建 <p> 时的元素标签。对于样式更改，IE 使用 <b> , <i>等，而 FF 使用带有样式属性的 span。