Рендеринг HTML внутри текстовой области

Question

Мне нужно иметь возможность отображать некоторые теги HTML внутри текстовой области (а именно , , , ), но текстовые области интерпретируют только их содержимое как текст. Есть ли простой способ сделать это, не полагаясь на внешние библиотеки / плагины (я использую jQuery)? Если нет, знаете ли вы какой-нибудь плагин jQuery, который я мог бы использовать для этого?

Answer 1

Это невозможно сделать с textarea. То, что вы ищете, это редактируемый контент div, который очень легко сделать:

<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

С редактируемым 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!Помимо мигания при изменении размера, невозможности непосредственного использования классов и необходимости убедиться, что div в svg имеет тот же формат, что и textarea для правильного выравнивания каретки, это работает!

Answer 4

Приложение к этому. Вы можете использовать символьные объекты (например, изменить <div> на <div>), и он будет отображаться в текстовой области. Но когда он сохранен, значением текстовой области является текст в том виде, в котором он отображается . Таким образом, вам не нужно декодировать. Я только что проверил это в разных браузерах (т.е. вернулось к 11).

Answer 5

попробуйте этот пример на 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>

Редактирование Джеффри Краудером - веб-разработчиком / программистом Windows

Я добавил JS скрипку кода.

Answer 6

У меня та же проблема, но в обратном порядке, и следующее решение. Я хочу поместить html из div в текстовую область (чтобы я мог редактировать некоторые реакции на моем веб-сайте; я хочу, чтобы текстовая область находилась в том же месте).

Чтобы поместить содержимое этого div в текстовую область, я использую:

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>)