Мне нужно иметь возможность отображать некоторые HTML-теги внутри текстового поля (а именно <strong>, <i>, <u>, <a>), но текстовые поля интерпретируют их содержимое только как текст. Есть ли простой способ сделать это, не полагаясь на внешние библиотеки / плагины (я использую jQuery)? Если нет, знаете ли вы какой-нибудь плагин jQuery, который я мог бы использовать для этого?
javascript
jquery
html
textarea
Кодирующий монах
источник
источник
Ответы:
Это невозможно сделать с файлом
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>источник
contenteditableявляется перечислимым атрибутом, а не логическим атрибутом (естьinheritсостояние, а такжеtrueиfalse), и я думаю, что это означает, что указание значения является обязательным, хотя я не могу найти окончательный бит спецификации, чтобы подтвердить это. Однако MDN, похоже, согласен .contenteditableбез значения интерпретирует как то же самоеcontenteditable="", что иcontenteditable="true".textarea. Ввод<strong>someting</strong>на скрипке оставляет вам точный текст. HTML не применяется.С редактируемым 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для правильного выравнивания каретки, это работает!источник
Дополнение к этому. Вы можете использовать символьные сущности (например, изменить
<div>на<div>), и они будут отображаться в текстовом поле. Но когда он сохраняется, значение textarea - это текст в том виде, в котором он отображается . Так что вам не нужно декодировать. Я только что протестировал это в браузерах (то есть до 11).источник
<textarea> check for url <B>http://localhost/Dashboard.aspx</B> <BR> Tool Started at <B>11/10/2015 3:56:58 AM</B> <BR> .... </textarea>, не отображается как HTML. Я использую Chrome 46.попробуйте этот пример
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>источник
У меня такая же проблема, но наоборот, и следующее решение. Я хочу поместить 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>источник
Это возможно,
<textarea>единственное, что вам нужно сделать, это использовать редактор Summernote WYSIWYG.он интерпретирует HTML - теги внутри текстового поля (а именно
<strong>,<i>,<u>,<a>)источник