blocks|key|820842|text|这在textarea中是不可能做到的。您正在寻找的是一个content+editable+div，这非常容易完成：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|820843|<div+contenteditable="true"></div>|code-block|syntax|javascript|820844|jsFiddle|820845|​|820846|div.editable+{
++++width:+300px;
++++height:+200px;
++++border:+1px+solid+#ccc;
++++padding:+5px;
}

strong+{
++font-weight:+bold;
}|820847|<div+contenteditable="true">This+is+the+first+line.<br>
See,+how+the+text+fits+here,+also+if<br>there+is+a+<strong>linebreak</strong>+at+the+end?
<br>It+works+nicely.
<br>
<br><span+style="color:+lightgreen">Great</span>.
</div>|820848|820849|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content|1|http://jsfiddle.net/plantface/8zevmL4d/^0|2|8|S|G|0|0|0|0|8|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|M|3|N|5|6|7|1E|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|S|3|N|5|6|7|1H|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

<p>This is not possible to do with a <code>textarea</code>. What you are looking for is an <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content" rel="noreferrer">content editable</a> div, which is very easily done:</p>

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

<p><a href="http://jsfiddle.net/plantface/8zevmL4d/" rel="noreferrer">jsFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div contenteditable="true"&gt;This is the first line.&lt;br&gt;
See, how the text fits here, also if&lt;br&gt;there is a &lt;strong&gt;linebreak&lt;/strong&gt; at the end?
&lt;br&gt;It works nicely.
&lt;br&gt;
&lt;br&gt;&lt;span style="color: lightgreen"&gt;Great&lt;/span&gt;.
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1035999|text|通过一个可编辑的div，您可以使用方法document.execCommand+(more+details)轻松地为您指定的标记和其他一些功能提供支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1036000|​|1036001|#text+{
++++width+:+500px;
	min-height+:+100px;
	border+:+2px+solid;
}|code-block|syntax|javascript|1036002|<div+id="text"+contenteditable="true"></div>
<button+onclick="document.execCommand('bold');">toggle+bold</button>
<button+onclick="document.execCommand('italic');">toggle+italic</button>
<button+onclick="document.execCommand('underline');">toggle+underline</button>|1036003|1036004|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand^0|J|K|15|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>With an editable div you can use the method <code>document.execCommand</code> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand">more details</a>) to easily provide the support for  the tags you specified and for some other functionality..</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#text {
    width : 500px;
	min-height : 100px;
	border : 2px solid;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="text" contenteditable="true"&gt;&lt;/div&gt;
&lt;button onclick="document.execCommand('bold');"&gt;toggle bold&lt;/button&gt;
&lt;button onclick="document.execCommand('italic');"&gt;toggle italic&lt;/button&gt;
&lt;button onclick="document.execCommand('underline');"&gt;toggle underline&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1036088|text|我有同样的问题，但是相反，和下面的解决方案。我想把div中的html放到一个文本区域中(这样我就可以在我的网站上编辑一些反应；我想让这个文本区域处于相同的位置。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036089|为了将这个div的内容放在一个文本区域中，我使用：|1036090|​|1036091|var+content+=+$('#msg500').text();
$('#msg500').wrapInner('<textarea>'+%2B+content+%2B+'</textarea>');|code-block|syntax|javascript|1036092|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+id="msg500">here+some+<strong>html</strong>+<i>tags</i>.</div>|1036093|1036094|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I have the same problem but in reverse, and the following solution. I want to put html from a div in a textarea (so I can edit some reactions on my website; I want to have the textarea in the same location.)</p>

<p>To put the content of this div in a textarea I use:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var content = $('#msg500').text();
$('#msg500').wrapInner('&lt;textarea&gt;' + content + '&lt;/textarea&gt;');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="msg500"&gt;here some &lt;strong&gt;html&lt;/strong&gt; &lt;i&gt;tags&lt;/i&gt;.&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|820987|text|试一下这个例子|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820988|​|820989|function+toggleRed()+{
++var+text+=+$('.editable').text();
++$('.editable').html('<p+style="color:red">'+%2B+text+%2B+'</p>');
}

function+toggleItalic()+{
++var+text+=+$('.editable').text();
++$('.editable').html("<i>"+%2B+text+%2B+"</i>");
}

$('.bold').click(function()+{
++toggleRed();
});

$('.italic').click(function()+{
++toggleItalic();
});|code-block|syntax|javascript|820990|.editable+{
++width:+300px;
++height:+200px;
++border:+1px+solid+#ccc;
++padding:+5px;
++resize:+both;
++overflow:+auto;
}|820991|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+class="editable"+contenteditable="true"></div>
<button+class="bold">toggle+red</button>
<button+class="italic">toggle+italic</button>|820992|820993|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>try this example </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleRed() {
  var text = $('.editable').text();
  $('.editable').html('&lt;p style="color:red"&gt;' + text + '&lt;/p&gt;');
}

function toggleItalic() {
  var text = $('.editable').text();
  $('.editable').html("&lt;i&gt;" + text + "&lt;/i&gt;");
}

$('.bold').click(function() {
  toggleRed();
});

$('.italic').click(function() {
  toggleItalic();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
  resize: both;
  overflow: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="editable" contenteditable="true"&gt;&lt;/div&gt;
&lt;button class="bold"&gt;toggle red&lt;/button&gt;
&lt;button class="italic"&gt;toggle italic&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|821059|text|使用<textarea>可以做到这一点您唯一需要做的就是使用Summernote+WYSIWYG+editor|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|821060|它解释文本区域内的超文本标记语言(即<strong>、<i>、<u>、<a>)|821061|entityMap|0|LINK|mutability|MUTABLE|url|http://summernote.org/getting-started/#installation^0|2|A|U|P|0|0|I|8|R|3|V|3|Z|3|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>This is possible with <code>&lt;textarea&gt;</code>
the only thing you need to do is use 
<a href="http://summernote.org/getting-started/#installation" rel="nofollow noreferrer">Summernote WYSIWYG editor</a></p>

<p>it interprets HTML tags inside a textarea (namely <code>&lt;strong&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;u&gt;</code>, <code>&lt;a&gt;</code>) </p>


blocks|key|1036224|text|因为你只说了渲染，是的，你可以。你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1036225|function+render(){
	var+inp+++++=+document.getElementById("box");
	var+data+=+`
<svg+xmlns="http://www.w3.org/2000/svg"+width="${inp.offsetWidth}"+height="${inp.offsetHeight}">
<foreignObject+width="100%25"+height="100%25">
<div+xmlns="http://www.w3.org/1999/xhtml"+
style="font-family:monospace;font-style:+normal;+font-variant:+normal;+font-size:13.3px;padding:2px;;">
${inp.value}+<i+style="color:red">cant+touch+this</i>
</div>
</foreignObject>
</svg>`;
	var+blob+=+new+Blob(+[data],+{type:'image/svg%2Bxml'}+);
	var+url=URL.createObjectURL(blob);
	inp.style.backgroundImage="url("%2BURL.createObjectURL(blob)%2B")";
+}
+onload=function(){
++render();
++ro+=+new+ResizeObserver(render);
	ro.observe(document.getElementById("box"));
+}|code-block|syntax|javascript|1036226|#box{
++color:transparent;
++caret-color:+black;
++font-style:+normal;/*must+be+same+as+in+the+svg+for+caret+to+align*/
++font-variant:+normal;+
++font-size:13.3px;
++padding:2px;
++font-family:monospace;
}|1036227|<textarea+id="box"+oninput="render()">you+can+edit+me!</textarea>|1036228|这使得textarea可以呈现html！除了调整大小时的闪烁，不能直接使用类，以及必须确保svg中的div具有与插入符号正确对齐的textarea相同的格式，它是有效的！|offset|length|style|CODE|1036229|​|1036230|entityMap^0|0|0|0|0|3|8|19|3|1T|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]|$M|11|N|12|O|P]|$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

<p>Since you only said render, yes you can. You could do something along the lines of this:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function render(){
	var inp     = document.getElementById("box");
	var data = `
&lt;svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}"&gt;
&lt;foreignObject width="100%" height="100%"&gt;
&lt;div xmlns="http://www.w3.org/1999/xhtml" 
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;"&gt;
${inp.value} &lt;i style="color:red"&gt;cant touch this&lt;/i&gt;
&lt;/div&gt;
&lt;/foreignObject&gt;
&lt;/svg&gt;`;
	var blob = new Blob( [data], {type:'image/svg+xml'} );
	var url=URL.createObjectURL(blob);
	inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
 }
 onload=function(){
  render();
  ro = new ResizeObserver(render);
	ro.observe(document.getElementById("box"));
 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#box{
  color:transparent;
  caret-color: black;
  font-style: normal;/*must be same as in the svg for caret to align*/
  font-variant: normal; 
  font-size:13.3px;
  padding:2px;
  font-family:monospace;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="box" oninput="render()"&gt;you can edit me!&lt;/textarea&gt;</code></pre>
</div>
</div>

This makes it so that a <code>textarea</code> will render html!
Besides the flashing when resizing, inability to directly use classes and having to make sure that the div in the <code>svg</code> has the same format as the <code>textarea</code> for the caret to align correctly, it's works!</p>


<p>I need to be able to render some HTML tags inside a textarea (namely &lt;strong&gt;, &lt;i&gt;, &lt;u&gt;, &lt;a&gt;) but textareas only interpret their content as text. Is there an easy way of doing it without relying on external libraries/plugins (I'm using jQuery)?
If not, do you know of any jQuery plugin I could use to do this?</p>


Rendering HTML inside textarea

jQuery

我需要能够在一个文本区域内呈现一些HTML标签(即，，，)，但是文本区域只将它们的内容解释为文本。有没有一种不依赖外部库/插件的简单方法(我使用的是jQuery)？如果没有，你知道有什么jQuery插件可以用来做这件事吗？

问在文本区域中呈现HTML
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在文本区域中呈现HTMLEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在文本区域中呈现HTML
EN