在文本区域内渲染 HTML

Question

I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of doing it without relying on external libraries/plugins (I'm using jQuery)? If not, do you know of any jQuery plugin I could use to do this?

Answer 1

This is not possible to do with a textarea . What you are looking for is an content editable div, which is very easily done:

<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

With an editable div you can use the method document.execCommand ( more details ) to easily provide the support for the tags you specified and for some other functionality..

 #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

Since you only said render, yes you can. You could do something along the lines of this:

 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!

Answer 4

try this example

 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

An addendum to this. You can use character entities (such as changing <div> to <div> ) and it will render in the textarea. But when it is saved, the value of the textarea is the text as rendered . So you don't need to de-encode. I just tested this across browsers (ie back to 11).

Answer 6

I have the same problem but in reverse, and the following solution. I want to put html from a div in a textarea (so I can edit some reactions on my website; I want to have the textarea in the same location.)

To put the content of this div in a textarea I use:

 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

This is possible with <textarea> the only thing you need to do is use Summernote WYSIWYG editor

it interprets HTML tags inside a textarea (namely <strong> , <i> , <u> , <a> )