我需要能够在 textarea（即 <strong>、<i>、<u>、<a>）内呈现一些 HTML 标签，但 textareas 仅将其内容解释为文本。有没有一种不依赖外部库/插件的简单方法（我使用的是 jQuery）？如果没有，你知道我可以用来做这件事的任何 jQuery 插件吗？
在 textarea 中渲染 HTML
IT技术
javascript
jquery
html
textarea
2021-02-05 14:01:19
6个回答
这是不可能的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>使用可编辑的 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>既然你只说渲染，是的，你可以。你可以做一些类似的事情：
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>textarea将呈现 html！除了在调整大小时闪烁，无法直接使用类以及必须确保 div 中的 div与插入符号svg具有相同的格式textarea才能正确对齐，它的工作原理！
试试这个例子
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>对此的补充。您可以使用字符实体（例如更改<div>为<div>），它将在 textarea 中呈现。但是当它被保存时，textarea 的值是呈现的文本。所以你不需要去编码。我刚刚跨浏览器测试了这个（即回到 11）。