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

Question

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

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

你不可以做这个：

替代文字 http://www.yart.com.au/test/html.gif

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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