web-dev-qa-db-ja.com

テキストエリア内のHTMLのレンダリング

テキストエリア（つまり、<strong>、<i>、<u>、<a>）内にいくつかのHTMLタグをレンダリングできるようにする必要がありますが、テキストエリアはコンテンツをテキストとしてのみ解釈します。外部ライブラリ/プラグインに依存せずにそれを行う簡単な方法はありますか（私はjQueryを使用しています）？そうでない場合、これを行うために使用できるjQueryプラグインを知っていますか？

javascriptjqueryhtmltextarea
124
The Coding Monk

これはtextareaではできません。探しているのは content editable 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>
207
mekwall

編集可能な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>
29
Sampath Liyanage

これへの補遺。文字エンティティ（<div>を&lt;div&gt;に変更するなど）を使用すると、テキスト領域にレンダリングされます。ただし、保存されるとき、textareaの値はテキストレンダリングされたとおりです。したがって、エンコードを解除する必要はありません。これをブラウザー間でテストしました（つまり、11に戻りました）。

2
axlotl

私は同じ問題を抱えていますが、逆に、次の解決策があります。 divのhtmlをtextareaに配置したい（したがって、自分のWebサイトでいくつかの反応を編集できます。textareaを同じ場所に配置したいです。）

この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>
1
Houdini

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>

編集者Jeffrey Crowder-Web開発者/ Windowsプログラマー

コードのJSフィドルを追加しました。

1
david grinstein