Почему я должен использовать редактор WYSIWYG? Это действительно не ответ, извините.

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

 Pointy16 янв. 2011 г., 15:26
Единственный способ сделать это - наложить вашу HTML-разметку поверх содержимого тега textarea с помощью приемов позиционирования CSS. Ничто не поможет вам убедить браузер отображать содержимое текстовой области по-другому. (Почему именно вам «нужно» это сделать?)
 The Coding Monk16 янв. 2011 г., 15:31
Мне просто нужно, чтобы пользователь мог добавить несколько стилей форматирования в текст, который он вводит (так же, как когда вы пишете статью в Wordpress). Мне просто не нужны все функции, такие как выравнивание текста и т. Д., А только основные теги.

Ответы на вопрос(7)

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

 sirdank10 нояб. 2015 г., 18:00
Я бы очень хотел, чтобы это сработало для меня, но это не так. Например<textarea> check for url &lt;B&gt;http://localhost/Dashboard.aspx&lt;/B&gt; &lt;BR&gt; Tool Started at &lt;B&gt;11/10/2015 3:56:58 AM&lt;/B&gt; &lt;BR&gt; .... </textarea> не отображается как HTML. Я на Chrome 46.
 axlotl10 нояб. 2015 г., 21:50
Гектометр Я скопировал и вставил эту строку непосредственно в html-документ, и она правильно отображает разметку для меня в Chrome версии 48.0.2552.0 dev (64-bit) OS X 10.11.1. Так что, возможно, это проблема версии.
 stomstack04 окт. 2016 г., 21:43
У меня тоже не работает.
 axlotl07 окт. 2016 г., 19:39
Я продолжаю получать голоса за это, поэтому вот ручка:codepen.io/axlotl/pen/YGZOEq

но в обратном порядке, и следующее решение. Я хочу поместить 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>

сделать, да, вы можете. Вы могли бы сделать что-то вроде этого:

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>

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

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

<textarea> единственное, что вам нужно сделать, это использоватьSummernote WYSIWYG редактор

он интерпретирует HTML-теги внутри текстовой области (а именно<strong>, <i>, <u>, <a>)

 Usman Ahmed15 янв. 2018 г., 11:54
В чем смысл? Он работает так же, как ckeditor, если используется textarea. Невозможно отобразить теги HTML в соответствии с запросом
 Usman Ahmed07 янв. 2018 г., 18:38
Он не использует textarea. Он использует div, который нельзя отправить с формой.
 Luca De Nardi24 янв. 2019 г., 15:41
Почему я должен использовать редактор WYSIWYG? Это действительно не ответ, извините.
 Fenil Shah08 янв. 2018 г., 09:59
Это работает с textarea, просто попробуйте дать идентификатор textarea вместо div. Я создал целый проект, используя textarea и summernote. Работает отлично!
Решение Вопроса

Это невозможно сделать с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>

 Ben30 июн. 2013 г., 13:51
Жаль, что вы не можете использовать это практически без использования javascript для отправки изменений с помощью ajax или копирования их в форму ввода. Если бы кто-нибудь нашел способ сделать это, мне было бы очень интересно!
 Blauhirn30 мар. 2016 г., 22:43
@MarcusEkwall, но разве не вопрос о рендеринге html?
 Tim Down09 июл. 2013 г., 16:10
@yckart: Ну, я не думаю, что это действительно так, хотя это работает во всех браузерах, которые я пробовал.contenteditable является перечисляемым атрибутом а не логический атрибут (естьinherit состояние, а такжеtrue а такжеfalse) , и ядумать это означает, что указание значения является обязательным, хотя я не могу найти определенный бит спецификации, чтобы подтвердить это. MDNкажется согласен хотя.
 Tim Down09 июл. 2013 г., 17:34
@yckart: я предположил, что браузер интерпретируетcontenteditable не имеет значения, совпадающего сcontenteditable=""что, в свою очередь, совпадает сcontenteditable="true".
 Matt Ellen25 мар. 2014 г., 12:55
Это не работает лучше, чемtextarea, Typing<strong>someting</strong> в скрипку оставляет вас с этим точным текстом. HTML не применяется.

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>

 jeffrey crowder03 дек. 2016 г., 04:09
Это не работает в некоторых браузерах, просто добавив это как примечание AS '16
 Amin NAIRI03 февр. 2019 г., 09:37
Это намного проще и естественнее. Я надеюсь, что это скоро будет полностью поддержано.

Ваш ответ на вопрос