テキストエリアでリッチテキスト編集を実現するにはどうすればよいですか?

テキストエリアでのリッチ テキスト編集: 制限事項の回避

テキストエリアは、内蔵スクロールバーによる貴重な機能を提供します。ただし、HTML 要素を使用して特定のテキスト部分を書式設定する機能がありません。

解決策: Contenteditable Div を使用して TextArea をエミュレートする

この制限を克服するには、次の手順を実行します。 contenteditable 属性を持つ div を使用した textarea の動作。その理由は次のとおりです。

• より優れたカスタマイズ オプションが提供されます。
• テキストエリアはプレーン テキスト用に設計されていますが、div はリッチ コンテンツをサポートします。

実装例

偽のテキストエリアを作成するには、単に次の HTML:

<div>
<p><strong>追加の考慮事項</strong></p>
<ul>
<li>スクロールバーは CSS オーバーフローで再現できます。</li>
<li>フォームの送信: 非表示の入力を使用します。偽物の内容をキャプチャするテキストエリア:</li>
</ul>
<pre class="brush:php;toolbar:false"><input type="hidden">

$('#your_form').submit(function()
{
  $('#fake_textarea_content').val($('#fake_textarea').html());
});