javascript 如何在 textarea 中显示 HTML 格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7785607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I show HTML formatting inside a textarea?
提问by Thomas McFarlane
I have code that lets you format the text in a textarea with bold, underline, strikeout or italics. But it displays the html tags instead of actually formatting it. I know once I output it inside a div, it ill be formatted, but I want to show the formatting while the user writes the text.
我有一些代码可以让你在 textarea 中使用粗体、下划线、删除线或斜体来格式化文本。但它显示 html 标签而不是实际格式化它。我知道一旦我在 div 中输出它，它就会被格式化，但我想在用户编写文本时显示格式。
How can I enable formatting? JavaScript is fine, I'm using JQuery at the moment. I would also rather not use a WYSIWYG editor, if there is another option.
如何启用格式化？JavaScript 很好，我现在正在使用 JQuery。如果有其他选择，我也宁愿不使用 WYSIWYG 编辑器。
Thanks for any help.
谢谢你的帮助。
回答by Aurimas Li?kus
Use contentEditable attribute on div element
在 div 元素上使用 contentEditable 属性
<div contentEditable="true">
</div
This way you can format your input in any desired way, just dont forget properly escape data.
这样您就可以以任何所需的方式格式化您的输入，只是不要忘记正确转义数据。
回答by WCMiller
Just a thought; if you just want to let users see what their response will look like, you could take a cue from this site and have a sort of "preview" div right above/below the comment box. You could use onKeyUp to put the code into the div to keep it up do date as the user types. It's not perfect, but it's probably as good as you're going to get if you don't want to use a WYSIWYG.
只是一个想法; 如果您只是想让用户看到他们的回复是什么样的，您可以从这个网站获得提示，并在评论框的正上方/下方放置一种“预览”div。您可以使用 onKeyUp 将代码放入 div 中，以使其在用户键入时保持最新状态。它并不完美，但如果您不想使用 WYSIWYG，它可能与您将要获得的一样好。
That being said, the contentEditable + WYSIWYG option is probably more user friendly, and simpler, IMHO.
话虽如此，恕我直言，contentEditable + WYSIWYG 选项可能对用户更友好，也更简单。
回答by janoliver
I believe it's only possible by using some div or other styleable html element instead of your textarea. With Javascript you would then add the functionality of the textarea.
我相信这只能通过使用一些 div 或其他可样式化的 html 元素而不是你的 textarea 来实现。使用 Javascript，您将添加 textarea 的功能。
How about you use some formatting system like this here on SO? It is much more elegant in my opinion, than pseudo WYSIWYG.
你在 SO 上使用一些像这样的格式化系统怎么样？在我看来，它比伪 WYSIWYG 优雅得多。
回答by Marknl
Replace the textarea with an div and enable the designmode. Or you can use the jquery plugin http://plugins.jquery.com/project/designMode
用 div 替换 textarea 并启用设计模式。或者你可以使用 jquery 插件http://plugins.jquery.com/project/designMode
回答by Jonas m
Cant be done inside of an Textarea, you will have to go with making a wysiwyg editor or something like that. Its pretty easy to make one of those yourself. This is a pretty good tutorial:
不能在 Textarea 内完成，你将不得不制作一个所见即所得的编辑器或类似的东西。自己制作其中之一非常容易。这是一个非常好的教程：
