如何在 HTML 文本区域中显示样式答案

【问题标题】：How do you display styles in a HTML textarea如何在 HTML 文本区域中显示样式
【发布时间】：2008-10-29 01:33:08
【问题描述】：

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

网页中使用的 WYSIWYG 编辑器（例如 tinyMCE）通常会这样做，但我无法弄清楚它们是如何做到的。

你不能这样做：

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

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

【问题讨论】：

标签： html wysiwyg styles

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

通常他们会用自己的显示组件（如 div）覆盖 textarea。当用户输入时，javascript 将获取输入的内容并在显示区域应用样式。 textarea 的值是以指定样式呈现它所需的带有 html 标记的文本。用户可以明显地看到样式化的文本。

这当然是一个简化的解释。

【讨论】：

这是有道理的，但是如果一个 div 在它上面，你会如何看到光标呢？
其实光标是放在显示器上，由javascript管理的。用户实际上并没有与 textarea 交互。

【解决方案3】：

我相信 tinymce 专门使用表格/iframe 进行显示（替换现有的 textarea）。准备好保存后，将所有信息复制回 textarea 进行处理。

【讨论】：