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?
This question is related to
javascript
jquery
html
textarea
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();_x000D_
$('#msg500').wrapInner('<textarea>' + content + '</textarea>');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>Since you only said render, yes you can. You could do something along the lines of this:
function render(){_x000D_
var inp = document.getElementById("box");_x000D_
var data = `_x000D_
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">_x000D_
<foreignObject width="100%" height="100%">_x000D_
<div xmlns="http://www.w3.org/1999/xhtml" _x000D_
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">_x000D_
${inp.value} <i style="color:red">cant touch this</i>_x000D_
</div>_x000D_
</foreignObject>_x000D_
</svg>`;_x000D_
var blob = new Blob( [data], {type:'image/svg+xml'} );_x000D_
var url=URL.createObjectURL(blob);_x000D_
inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";_x000D_
}_x000D_
onload=function(){_x000D_
render();_x000D_
ro = new ResizeObserver(render);_x000D_
ro.observe(document.getElementById("box"));_x000D_
}#box{_x000D_
color:transparent;_x000D_
caret-color: black;_x000D_
font-style: normal;/*must be same as in the svg for caret to align*/_x000D_
font-variant: normal; _x000D_
font-size:13.3px;_x000D_
padding:2px;_x000D_
font-family:monospace;_x000D_
}<textarea id="box" oninput="render()">you can edit me!</textarea>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!
try this example
function toggleRed() {_x000D_
var text = $('.editable').text();_x000D_
$('.editable').html('<p style="color:red">' + text + '</p>');_x000D_
}_x000D_
_x000D_
function toggleItalic() {_x000D_
var text = $('.editable').text();_x000D_
$('.editable').html("<i>" + text + "</i>");_x000D_
}_x000D_
_x000D_
$('.bold').click(function() {_x000D_
toggleRed();_x000D_
});_x000D_
_x000D_
$('.italic').click(function() {_x000D_
toggleItalic();_x000D_
});.editable {_x000D_
width: 300px;_x000D_
height: 200px;_x000D_
border: 1px solid #ccc;_x000D_
padding: 5px;_x000D_
resize: both;_x000D_
overflow: auto;_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="editable" contenteditable="true"></div>_x000D_
<button class="bold">toggle red</button>_x000D_
<button class="italic">toggle italic</button>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 {_x000D_
width : 500px;_x000D_
min-height : 100px;_x000D_
border : 2px solid;_x000D_
}<div id="text" contenteditable="true"></div>_x000D_
<button onclick="document.execCommand('bold');">toggle bold</button>_x000D_
<button onclick="document.execCommand('italic');">toggle italic</button>_x000D_
<button onclick="document.execCommand('underline');">toggle underline</button>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).
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>)
Source: Stackoverflow.com