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

Question

我想在textarea中添加不同的样式,例如大胆,不同的颜色等

网页中使用的WYSIWYG编辑器(例如tinyMCE)通常会这样做,但我无法弄清楚他们是如何做到这一点的.

你不能做这个:

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

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

Answer 1

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

这当然是简化的解释.

Answer 2

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

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