在文本区域内渲染 HTML

Question

我需要能够在 textarea（即 <strong>、<i>、<u>、<a>）内呈现一些 HTML 标签，但 textareas 仅将其内容解释为文本。 有没有不依赖外部库/插件的简单方法（我正在使用 jQuery）？ 如果没有，您是否知道我可以使用任何 jQuery 插件来执行此操作？

Answer 1

这对于textarea是不可能的。 您正在寻找的是一个内容可编辑的div，这很容易完成：

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

js小提琴

 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！ 除了在调整大小时闪烁，无法直接使用类以及必须确保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的渲染。 但是当它被保存时，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 编辑器

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