我可以在 <textarea> 标签中嵌入 HTML 格式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2580247/
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
Can I embed HTML formatting inside of a <textarea> tag?
提问by Rob Segal
If I have a textareablock like so...
如果我有一个textarea像这样的块...
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
.. text area content ...
</textarea>
How can I embed HTML formatted text inside this text block? If I can I had figured the following should work...
如何在此文本块中嵌入 HTML 格式的文本？如果可以的话，我认为以下应该有效......
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
As an example. But that sentence does not show up as bold. Maybe I'm just trying to do something that can't be done?
举个例子。但这句话并没有显示为粗体。也许我只是想做一些无法完成的事情？
采纳答案by MJB
回答by Sebastin Anthony
Is not possible with
是不可能的
<textarea>
Use this:
用这个：
<div contenteditable="true">
</div>
回答by 37Stars
You can do this (convert the "special" characters):
您可以这样做（转换“特殊”字符）：
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
回答by John Washam
You are correct, it cannot be done.
你是对的，这是不可能的。
According to MDN, "character data" is the only permitted content for a <textarea>.
As other answers have described, what you are looking for is a WYSIWYG editor, like CKEditor, TinyMCE, or Kendo's Editor.
正如其他答案所描述的那样，您正在寻找的是 WYSIWYG 编辑器，例如CKEditor、TinyMCE或 Kendo's Editor。
This is beside the point, but interestingly, MDN lists some examples on their HTMLTextAreaElementpage on how to enable dynamic adding of HTML tagsaround text in a <textarea>and how to enable autogrow behaviorfor a <textarea>.
这是题外话，但有趣的是，MDN列出了他们的一些例子HTMLTextAreaElement如何页面启用动态添加HTML标签的文本周围<textarea>，以及如何启用自动增长行为的<textarea>。
回答by Richard JP Le Guen
Nope! If you validated that in an HTML document, you'd get an error along the lines of
不！如果您在 HTML 文档中验证了这一点，您会收到类似以下内容的错误
document type does not allow element "b" here
文档类型不允许在此处使用元素“b”
What you might be looking for is a What-You-See-Is-What-You-Get editor, which is actually an <iframe>which is making use of a JavaScript feature designMode. It's possible to find tutorials on how to create these(archive), but it's a much, much better idea to use an existing one, as for it to be really useful and usable takes a lot of work.
您可能正在寻找的是 What-You-See-Is-What-You-Get 编辑器，它实际上是一个<iframe>利用 JavaScript 功能的编辑器designMode。可以找到有关如何创建这些（存档）的教程，但是使用现有的方法是一个更好的主意，因为它真正有用且可用需要大量工作。
Take note that - if you were still interested in validation, which you should be if you're working with HTML - is that you won't be able to use a strict DOCTYPEdeclaration, as the WYSIWYG editor will be using an iframe.
请注意 - 如果您仍然对验证感兴趣（如果您正在使用 HTML，您应该这样做）是您将无法使用严格DOCTYPE声明，因为 WYSIWYG 编辑器将使用iframe.
回答by Rohil Patel
You can try this too its simple and if you are using asp.net use lable contron in text area add this as
你也可以试试这个很简单，如果你使用的是asp.net，请在文本区域使用标签控制将其添加为
Text="< stonename >"
"<";stonename">";
回答by Jevgenij Kononov
You can not do that inside textarea but what you can do...you can use p tag and parse information to tag by JQuery. Something like this:
您不能在 textarea 内执行此操作，但是您可以做什么……您可以使用 p 标记并解析信息以通过 JQuery 进行标记。像这样的东西：
var stringviewinfo ="aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaa<b>aaaaaaaa</b>aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaa<font color=\"red\">AAAA</font>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<b>aaaaaaaaaaaaa<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
$('#viewinfo').html(stringviewinfo);
<p style="word-wrap: break-word;" id="viewinfo"></p>
I hope this will help.
我希望这将有所帮助。
回答by MonoThreaded
By now (8 years later) you know textarea is not the way to go.
If you happen to be using Vue.js, you can use a div with v-html to set the inner HTML
到现在（8 年后）你知道 textarea 不是要走的路。
如果你碰巧使用 Vue.js，你可以使用带有 v-html 的 div 来设置内部 HTML
<template>
<div name="myTextArea" cols="100" rows="20" readonly=readonly v-html="content" />
</template>
<script>
export default {
data() {
return{
content = "<b>Hello how are you today?</b>";
}
}
</script>
回答by Mr. HK
Here is the answer.
这是答案。
Use this function.
使用此功能。
function br2nl(varTest) {
return varTest.replace(/<br\s*\/?>/ig, "\r");
}
