Рендеринг HTML внутри textarea
Мне нужно иметь возможность отображать некоторые HTML-теги внутри textarea (а именно , , , ), но textarea только интерпретируют их содержимое как текст. Есть ли простой способ сделать это, не полагаясь на внешние библиотеки / плагины (я использую jQuery)? Если нет, знаете ли вы о каком-либо плагине jQuery, который я мог бы использовать для этого?
7 ответов
это невозможно сделать с помощью textarea
. То, что вы ищете-это контент редактируемым div, что очень легко сделать:
<div contenteditable="true"></div>
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>
С редактируемым 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>
поскольку вы сказали только рендер, да, вы можете. Ты мог бы сделать что-нибудь в этом роде.:
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 в svg
имеет тот же формат, как textarea
для каретки, чтобы выровнять правильно, это работает!попробуйте этот пример на JSFiddle
<style>
.editable {
width: 300px;
height: 200px;
border: 1px solid #ccc;
padding: 5px;
resize: both;
overflow: auto;
}
</style>
<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>
<script>
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();
});
</script>
Edit by Jeffrey Crowder-веб-разработчик / программист Windows
Я добавил скрипку JS кода.
у меня такая же проблема, но наоборот, и следующее решение. Я хочу поместить html из div в textarea (чтобы я мог редактировать некоторые реакции на своем веб-сайте; я хочу иметь textarea в том же месте.)
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>
чтобы поместить содержимое этого div в textarea я использую:
var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>'+content+'</textarea>');
добавление к этому. Вы можете использовать сущности символов (например, changing <div>
до <div>
), и он будет отображаться в текстовом поле. Но когда он сохраняется, значением textarea является text как вынесенное. Так что вам не нужно кодировать. Я только что протестировал это в браузерах (т. е. обратно в 11).
С <textarea>
единственное, что вам нужно сделать, это использовать
Summernote WYSIWYG редактор
он интерпретирует HTML-теги внутри текстового поля (а именно <strong>
, <i>
, <u>
, <a>
)