blocks|key|1070757|text|是不可能的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070758|<textarea>+|code-block|syntax|javascript|1070759|使用以下命令：|1070760|<div+contenteditable="true">
</div>|1070761|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Is not possible with </p>

<pre><code>&lt;textarea&gt; 
</code></pre>

<p>Use this:</p>

<pre><code>&lt;div contenteditable="true"&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1070670|text|你说得对，这是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070671|According+to+MDN，"character+data“是<textarea>唯一允许的内容。|offset|length|style|CODE|1070672|正如其他答案所描述的那样，您正在寻找的是一个所见即所得编辑器，比如CKEditor、TinyMCE或剑道的Editor。|1070673|这不是重点，但有趣的是，MDN在他们的HTMLTextAreaElement页面上列出了一些关于如何在<textarea>中围绕文本进行enable+dynamic+adding+of+HTML+tags以及如何为执行enable+autogrow+behavior的示例。|1070674|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea|1|https://developer.mozilla.org/en-US/docs/Web/API/CharacterData|2|http://ckeditor.com/|3|http://www.tinymce.com/|4|http://demos.telerik.com/kendo-ui/editor/index|5|https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement|6|https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#Insert_HTML_tags_example|7|https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#Autogrowing_textarea_example^0|0|Y|A|0|G|0|I|E|1|0|X|8|2|16|7|3|1H|6|4|0|1F|A|J|J|5|1W|Y|6|31|O|7|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@$D|1B|E|1C|1|1D]|$D|1E|E|1F|1|1G]]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]|$D|1L|E|1M|1|1N]|$D|1O|E|1P|1|1Q]]|A|$]]|$1|J|3|K|5|6|7|1R|8|@$D|1S|E|1T|F|G]]|9|@$D|1U|E|1V|1|1W]|$D|1X|E|1Y|1|1Z]|$D|20|E|21|1|22]]|A|$]]|$1|L|3|-4|5|6|7|23|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]|V|$5|O|P|Q|A|$R|W]]|X|$5|O|P|Q|A|$R|Y]]|Z|$5|O|P|Q|A|$R|10]]|11|$5|O|P|Q|A|$R|12]]|13|$5|O|P|Q|A|$R|14]]|15|$5|O|P|Q|A|$R|16]]]]

<p>You are correct, it cannot be done.</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="nofollow noreferrer">According to MDN</a>, "<a href="https://developer.mozilla.org/en-US/docs/Web/API/CharacterData" rel="nofollow noreferrer">character data</a>" is the only permitted content for a <code>&lt;textarea&gt;</code>.</p>

<p>As other answers have described, what you are looking for is a WYSIWYG editor, like <a href="http://ckeditor.com/" rel="nofollow noreferrer">CKEditor</a>, <a href="http://www.tinymce.com/" rel="nofollow noreferrer">TinyMCE</a>, or Kendo's <a href="http://demos.telerik.com/kendo-ui/editor/index" rel="nofollow noreferrer">Editor</a>.</p>

<p>This is beside the point, but interestingly, MDN lists some examples on their <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement" rel="nofollow noreferrer">HTMLTextAreaElement</a> page on how to <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#Insert_HTML_tags_example" rel="nofollow noreferrer">enable dynamic adding of HTML tags</a> around text in a <code>&lt;textarea&gt;</code> and how to <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#Autogrowing_textarea_example" rel="nofollow noreferrer">enable autogrow behavior</a> for a <code>&lt;textarea&gt;</code>.</p>


blocks|key|1285251|text|您可以这样做(转换“特殊”字符)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285252|<textarea+name="myTextArea"+cols="100"+rows="20"+readonly=readonly>
&lt;b&gt;Hello+how+are+you+today?&lt;/b&gt;
</textarea>|code-block|syntax|javascript|1285253|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do this (convert the "special" characters):</p>

<pre><code>&lt;textarea name="myTextArea" cols="100" rows="20" readonly=readonly&gt;
&amp;lt;b&amp;gt;Hello how are you today?&amp;lt;/b&amp;gt;
&lt;/textarea&gt;
</code></pre>


blocks|key|1285325|text|您也可以尝试它，它很简单，如果您使用的是asp.net在文本区域中使用标签控制，则将此添加为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285326|Text="&lt;+stonename+&gt;"+
"&lt";stonename"&gt";|code-block|syntax|javascript|1285327|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can try this too its simple and if you are using asp.net use lable contron in text area add this as </p>

<pre><code>Text="&amp;lt; stonename &amp;gt;" 
"&amp;lt";stonename"&amp;gt";
</code></pre>


blocks|key|1070809|text|你不能在文本区域中这样做，但是你可以使用p+do...you和解析信息来通过JQuery来标记。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070810|++++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>|code-block|syntax|javascript|1070811|我希望这能有所帮助。|1070812|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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: </p>

<pre><code>    var stringviewinfo ="aaaaaaaaaaaaaaaaaa&lt;br&gt;aaaaaaaaaaaaaaaaaaaaaaaaa&lt;br&gt;aaaaaaaaaaaaaaaa&lt;b&gt;aaaaaaaa&lt;/b&gt;aaaaaaaaaaaaaaaaaa&lt;br&gt;aaaaaaaaaaa&lt;font color=\"red\"&gt;AAAA&lt;/font&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;b&gt;aaaaaaaaaaaaa&lt;b&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;br&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/br&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";      
$('#viewinfo').html(stringviewinfo);
&lt;p style="word-wrap: break-word;" id="viewinfo"&gt;&lt;/p&gt;
</code></pre>

<p>I hope this will help. </p>


blocks|key|1285506|text|到现在(8年后)，你知道textarea不是一条可行的道路。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285507|如果您碰巧使用的是Vue.js，那么可以使用带有v-html的div来设置内部HTML|1285508|<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>|code-block|syntax|javascript|1285509|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>By now (8 years later) you know textarea is not the way to go.<br><br>
If you happen to be using Vue.js, you can use a div with v-html to set the inner HTML<br></p>

<pre><code>&lt;template&gt;
    &lt;div name="myTextArea" cols="100" rows="20" readonly=readonly v-html="content" /&gt;
&lt;/template&gt;

&lt;script&gt;
    export default {
        data() {
            return{
                content = "&lt;b&gt;Hello how are you today?&lt;/b&gt;";
            }
    }
&lt;/script&gt;
</code></pre>


blocks|key|1285427|text|这就是答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285428|使用此函数。|1285429|function+br2nl(varTest)+{
++++++++return+varTest.replace(/<br\s*\/?>/ig,+"\r");
++++}|code-block|syntax|javascript|1285430|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is the answer.</p>

<p>Use this function.</p>

<pre><code>function br2nl(varTest) {
        return varTest.replace(/&lt;br\s*\/?&gt;/ig, "\r");
    }
</code></pre>


<p>If I have a <code>textarea</code> block like so...</p>

<pre><code>&lt;textarea name="myTextArea" cols="100" rows="20" readonly=readonly&gt;
.. text area content ...
&lt;/textarea&gt;
</code></pre>

<p>How can I embed HTML formatted text inside this text block?  If I can I had figured the following should work...</p>

<pre><code>&lt;textarea name="myTextArea" cols="100" rows="20" readonly=readonly&gt;
&lt;b&gt;Hello how are you today?&lt;/b&gt;
&lt;/textarea&gt;
</code></pre>

<p>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?</p>


Can I embed HTML formatting inside of a <textarea> tag?

如果我有一个像这样的textarea块...<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>.. text area content ...</textarea>如何在此文本块中嵌入HTML格式的文本？如果我可以的话，我认为下面的方法应该是可行的。<textarea name="myTextArea" cols=

问我可以在<textarea>标签中嵌入超文本标记语言格式吗？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在<textarea>标签中嵌入超文本标记语言格式吗？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在<textarea>标签中嵌入超文本标记语言格式吗？
EN