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

Question

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

网页中使用的WYSIWYG编辑器（例如tinyMCE）通常都是这样做的，但我很难弄清楚他们是如何做到这一点的。

你不能这样做：

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

那么他们如何实现呢？

Answer 1

通常他们会将textarea与他们自己的显示组件重叠，就像div一样。当用户输入时，javascript将输入内容并在显示区域中应用样式。 textarea的值是具有以指定样式呈现它所需的html标记的文本。因此，用户可以看到样式文本。

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

Answer 2

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

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

Answer 3

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