textarea内のHTMLのレンダリング

146

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

— コーディングモンク
ソース

これを行う唯一の方法は、CSS配置トリックを介してHTMLマークアップをtextareaタグのコンテンツにオーバーレイすることです。ブラウザがtextareaの内容を別の方法でレンダリングするように説得するのに役立つものはありません。（なぜこれを行う必要があるのか？）

— ポインティ

（Wordpressで記事を書くときと同じように）ユーザーが入力したテキストにいくつかの書式設定スタイルを追加できるようにするだけです。テキストの配置などのすべての機能は必要ありませんが、基本的なタグだけが必要です。

— コーディングモンク

234

これはで行うことはできません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>

スニペットを展開

— mekwall
ソース

8

JavaScriptを使用せずにajaxを使用して変更を送信するか、フォームの入力に変更をコピーしないと、これを実際に使用できないのは本当に残念です。誰かがそれをする方法を見つけたら、私は本当に興味があります！

— ベン

3

@yckart：試してみたすべてのブラウザで機能しますが、実際には有効だとは思いません。contenteditableはブール属性ではなく列挙型属性です（andとinherit同様に状態があります）。これは、値を指定することが必須であることを意味しますが、これを確認するための仕様の決定的なビットは見つかりません。MDN は同意するようです。truefalse

— Tim Down

2

@yckart：私は、ブラウザがcontenteditable値なしでと同じであると解釈しcontenteditable=""、それがと同じであると仮定しましたcontenteditable="true"。

— Tim Down

7

これはtextarea。よりもうまく機能しません。<strong>someting</strong>フィドルに入力すると、正確なテキストが表示されます。HTMLは適用されません。

— マットエレン14年

2

@MarcusEkwallですが、htmlレンダリングを求める質問ではありませんか？

— phil294 2016年

31

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

スニペットを展開

— サンパスリャナージュ
ソース

これは一部のブラウザーでは機能しません。これを'16のメモASとして追加するだけです

— ジェフリークラウダー

5

あなたはレンダリングだけを言ったので、はいできます。あなたはこれに沿って何かをすることができます：

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、キャレットが正しく整列するように機能します！

— マーリン
ソース

2

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

— axlotl
ソース

私は本当にこれがうまくいくようにしたいのですが、うまくいきませんでした。たとえば

<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として表示されません。私はクローム46上だ

— sirdank

うーん。その文字列を直接HTMLドキュメントにコピーアンドペーストすると、Chromeバージョン48.0.2552.0 dev（64ビット）OS X 10.11.1でマークアップが適切にレンダリングされます。おそらくそれはバージョンの問題です。

— axlotl 2015年

私はこれに反対票を投じているので、ここにペンがあります：codepen.io/axlotl/pen/YGZOEq

— axlotl

0

私は同じ問題を抱えていますが、逆に、次の解決策があります。divのhtmlをtextareaに配置したい（自分のWebサイトでリアクションを編集できるようにするため、textareaを同じ場所に配置したい）。

このdivのコンテンツをtextareaに配置するには、以下を使用します。

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>

スニペットを展開

— フーディーニ
ソース

0

この例を試してください

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>

スニペットを展開

— デビッドグリンスタイン
ソース

-2

これは<textarea> 、Summernote WYSIWYGエディターを使用するだけで可能です。

それはテキストエリア内のHTMLタグを解釈する（すなわち<strong>、<i>、<u>、<a>）

— フェニルシャー
ソース

textareaは使用しません。フォームでは送信できないdivを使用します。

— ウスマンアーメド

textareaでは機能します。divではなくtextareaにidを指定してみてください。textareaとsummernoteを使用してプロジェクト全体を作成しました。うまくいきます！

— Fenil Shah、2018

ポイントは何ですか？textareaが使用されている場合、ckeditorと同じように動作します。要求どおりにHTMLタグをレンダリングできません。

— ウスマンアーメド

なぜWYSIWYGエディターを使用する必要があるのですか？これは本当に答えではありません、申し訳ありません。

— Luca De Nardi