在 textarea 中渲染 HTML

Question

我需要能够在文本区域内呈现一些 HTML 标记（即 、、、），但文本区域仅将其内容解释为文本。有没有不依赖外部库/插件的简单方法（我正在使用 jQuery）？ 如果没有，你知道我可以用什么 jQuery 插件来做到这一点吗？

Answer 1

textarea 无法做到这一点。您正在寻找的是一个content editable 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>

Answer 2

使用可编辑的 div，您可以使用方法 document.execCommand (more details) 轻松地为您指定的标签和其他一些功能提供支持..

#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>

Answer 3

既然你只说渲染，是的，你可以。您可以按照以下方式做一些事情：

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！ 除了调整大小时闪烁，无法直接使用类，并且必须确保svg 中的 div 与textarea 具有相同的格式，以便插入符号正确对齐，它的工作原理！

Answer 4

试试这个例子

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>

Answer 5

对此的附录。您可以使用字符实体（例如将<div> 更改为<div>），它将在文本区域中呈现。但是当它被保存时，textarea 的值是文本呈现的。所以你不需要解码。我刚刚跨浏览器测试了这个（即回到 11）。

Answer 6

我有同样的问题，但反过来，以及以下解决方案。我想将 div 中的 html 放在 textarea 中（这样我就可以在我的网站上编辑一些反应；我希望将 textarea 放在同一位置。）

要将这个 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>

Answer 7

<textarea> 可以做到这一点 您唯一需要做的就是使用 Summernote WYSIWYG editor

它解释文本区域内的 HTML 标签（即<strong>、<i>、<u>、<a>）