在textarea中渲染HTML

Question

我需要能够在textarea中呈现一些HTML标签(即<strong>,<i>,<u>,<a>),但textareas只能将其内容解释为文本.有没有一种简单的方法可以不依赖外部库/插件(我使用的是jQuery)？如果没有,你知道我可以使用任何jQuery插件吗？

Answer 1

这是不可能的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>

Answer 2

使用可编辑的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>

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！除了在调整大小时闪烁外，还不能直接使用类，并且必须确保div中的div 与插入符号的svg格式相同，textarea以便正确对齐，这是可行的！