Javascript 在 textarea 中渲染 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4705848/
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
Rendering HTML inside textarea
提问by The Coding Monk
I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) 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?
我需要能够在 textarea（即 <strong>、<i>、<u>、<a>）内呈现一些 HTML 标签，但 textareas 仅将其内容解释为文本。有没有一种不依赖外部库/插件的简单方法（我使用的是 jQuery）？如果没有，你知道我可以用来做这件事的任何 jQuery 插件吗？
回答by mekwall
This is not possible to do with a textarea. What you are looking for is an content editablediv, which is very easily done:
这不可能用textarea. 您正在寻找的是一个内容可编辑的div，这很容易完成：
<div contenteditable="true"></div>
div.editable {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
}
strong {
font-weight: bold;
}<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>回答by Sampath Liyanage
With an editable div you can use the method document.execCommand(more details) to easily provide the support for the tags you specified and for some other functionality..
使用可编辑的 div，您可以使用该方法document.execCommand（更多详细信息）轻松为您指定的标签和其他一些功能提供支持。
#text {
width : 500px;
min-height : 100px;
border : 2px solid;
}<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>回答by merlin
Since you only said render, yes you can. You could do something along the lines of this:
既然你只说渲染，是的，你可以。你可以做一些类似的事情：
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%" height="100%">
<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+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"));
}#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;
}<textarea id="box" oninput="render()">you can edit me!</textarea>textareatextarea将呈现 html！除了调整大小时闪烁，无法直接使用类并且必须确保 div 中的 div与插入符号的svgsvg格式相同textareatextarea才能正确对齐，它的工作原理！回答by axlotl
An addendum to this. You can use character entities (such as changing <div>to <div>) and it will render in the textarea. But when it is saved, the value of the textarea is the text as rendered. So you don't need to de-encode. I just tested this across browsers (ie back to 11).
对此的补充。您可以使用字符实体（例如更改<div>为<div>），它将在 textarea 中呈现。但是当它被保存时，textarea 的值是呈现的文本。所以你不需要去编码。我刚刚跨浏览器测试了这个（即回到 11）。
回答by david grinstein
try this example
试试这个例子
function toggleRed() {
var text = $('.editable').text();
$('.editable').html('<p style="color:red">' + text + '</p>');
}
function toggleItalic() {
var text = $('.editable').text();
$('.editable').html("<i>" + text + "</i>");
}
$('.bold').click(function() {
toggleRed();
});
$('.italic').click(function() {
toggleItalic();
});.editable {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
resize: both;
overflow: auto;
}<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>回答by Houdini
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.)
我有同样的问题，但反过来，还有以下解决方案。我想将 div 中的 html 放在 textarea 中（这样我就可以在我的网站上编辑一些反应；我希望 textarea 位于同一位置。）
To put the content of this div in a textarea I use:
要将这个 div 的内容放在我使用的 textarea 中：
var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>' + content + '</textarea>');<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>回答by Fenil Shah
This is possible with <textarea>the only thing you need to do is use
Summernote WYSIWYG editor
这是可能的<textarea>，你需要做的唯一事情是使用
Summernote所见即所得的编辑器
it interprets HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>)
它解释文本区域内的 HTML 标签（即<strong>, <i>, <u>, <a>）
