テキスト領域内に HTML タグを表示するにはどうすればよいですか?

テキストエリア内での HTML タグの表示

テキストエリアでは、HTML タグをテキスト以外のものとして解釈できません。これは、テキストエリア内で 、、、 などの HTML コンテンツをレンダリングする必要がある場合に問題を引き起こします。

代替案: Content Editable Div

テキストエリアを使用してこの機能を実現することはできません。実現可能。代わりに、コンテンツ編集可能な div を利用できます。これは簡単に実装できます。

<div contenteditable="true"></div>

外観と書式設定

「contenteditable」属性を持つ Div により、インラインが可能になります。編集と HTML フォーマットのサポート。以下の CSS は、div の基本的なスタイルを提供します。

div.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
}

strong {
  font-weight: bold;
}

例

次の HTML コードは、コンテンツ編集可能な div の使用方法を示しています。

<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>

この div を使用すると、インライン編集を行って HTML 書式設定を適用できます。これは、Web ページ内で HTML コンテンツを表示するための、より堅牢でユーザーフレンドリーなソリューションを提供します。

以上がテキスト領域内に HTML タグを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。