在文本區域內渲染 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> ）