如何在文本区域内显示 HTML 格式？ [复制]

Posted 2023-05-07

【中文标题】如何在文本区域内显示 HTML 格式？ [复制]

【英文标题】：How can I show HTML formatting inside a textarea? [duplicate]

【发布时间】：2011-12-08 19:03:24

【问题描述】：

我的代码可以让您在 textarea 中使用粗体、下划线、删除线或斜体来格式化文本。但它显示 html 标签而不是实际格式化它。我知道一旦我在 div 中输出它，它就会被格式化，但我想在用户编写文本时显示格式。

如何启用格式化？ javascript 很好，我现在正在使用 JQuery。如果有其他选择，我也宁愿不使用 WYSIWYG 编辑器。

感谢您的帮助。

【参考方案1】：

在 div 元素上使用 contentEditable 属性

 <div contentEditable="true"> 
 </div

通过这种方式，您可以以任何所需的方式格式化您的输入，只是不要忘记正确转义数据。

【讨论】：

这仅适用于支持 HTML5 的浏览器，它是合理的，但不会解决跨浏览器的可靠性问题。

@lolwut: contentEditable 已在所有主要（桌面）浏览器中支持quite some time。

【参考方案2】：

只是一个想法；如果您只想让用户看到他们的响应会是什么样子，您可以从该站点获取提示，并在评论框上方/下方有一种“预览” div。您可以使用 onKeyUp 将代码放入 div 以使其在用户键入时保持最新状态。它并不完美，但如果您不想使用 WYSIWYG，它可能会尽可能好。

话虽如此，contentEditable + WYSIWYG 选项可能对用户更友好，更简单，恕我直言。

【参考方案3】：

我相信只有使用一些 div 或其他可样式化的 html 元素而不是你的 textarea 才有可能。使用 Javascript，您将添加 textarea 的功能。

您如何在 SO 上使用像这样的格式化系统？在我看来，它比伪 WYSIWYG 更优雅。

【参考方案4】：

用 div 替换 textarea 并启用设计模式。 或者你可以使用jquery插件http://plugins.jquery.com/project/designMode

【参考方案5】：

不能在 Textarea 内完成，您必须制作所见即所得的编辑器或类似的东西。自己做一个很容易。 这是一个很好的教程：

Devgurus wysiwyg tutorial