在文本区域内渲染 HTML

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

309083 次浏览
小开
最佳答案

这是不可能的做与 textarea。您正在寻找一个 内容可编辑 div，这是非常容易做到的:

<div contenteditable="true"></div>

JsFiddle

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>

小开

我有相同的问题，但在相反的，以下的解决方案。我想把来自 div 的 html 放在一个 textarea 中(这样我就可以在我的网站上编辑一些反应; 我想让 textarea 放在同一个位置。)

要将这个 div 的内容放入一个文本区域，我使用:

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>

小开

补充说明: 您可以使用字符实体(例如将 <div>更改为 &lt;div&gt;) ，它将在文本区域中呈现。

但是当它被保存时，textarea 的值是文本 就像我说的那样。所以你不需要解码。我只是在不同的浏览器上进行了测试(Internet Explorer 回到 版本11)。

小开

试试这个例子:

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>

小开

<textarea>可以做到这一点。 您只需使用 所见即所得编辑。

它在文本区(即 <strong>、 <i>、 <u>和 <a>)内解释 HTML 标记。

小开

因为你只说了渲染，是的，你可以这样做: 

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


提交答案