textareaに画像を表示したい

質問

textareaの入力支援を作成しています。

PHPで画像のディレクトリを開き別窓などに一覧表示させ、
その画像をクリックでjQueryでテキストエリアへタグを挿入。

<textarea id="test">
あああ
<img src="hoge.jpg">
いいい
</textarea>

↑のようにIMGタグを挿入する状態までは実装させることが出来るのですが、
UI的に、このIMGタグを画像（サムネ）として表示させたいと考えています。

<textarea id="test">
あああ
■（←画像）
いいい
</textarea>

テキストエリアを監視して置換するなど方法はありそうなのですが
そもそもテキストエリア内で画像を表示させることができるのでしょうか？

何かいいアイディア、あるいはプラグイン等がありましたら教えてください。

回答No.3

font_color · ベストアンサー

はじめまして。

テキストエリア内に画像を表示する事は、おそらく難しいと思います。
私も以前、質問者様と似たようなUIに挑戦した事があるので参考になればと。

1.テキストエリア自体は非表示にし、別要素（仮にDIV）を作成し同じスタイルをつけます。

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

　※contenteditable属性をつける事で編集可能な要素となります。

2.DIV要素にテキストや画像などを挿入し編集します。

　　<textarea></textarea>
　　<div contenteditable="true">あああ<div><img src="hoge.jpg" /></div>いいい</div>

　※エンターキーによる改行などで挿入されるタグはブラウザによって違います。

3.DIV要素を変更したタイミングで要素内のHTMLを取得しtextareaのvalueに入れ込みます。

　　<textarea>あああ<div><img src="hoge.jpg" /></div>いいい</textarea>
　　<div contenteditable="true">あああ<div><img src="hoge.jpg" /></div>いいい</div>

4.後はPOSTし受け側で整形してDBに書き込みます。

以上が大まかな流れです。
要素内の画像は表示されるので編集のUIに向いているかと思います。

以下参考リンクです。

contenteditable=true - コンテンツの編集許可（とほほのＷＷＷ入門）
http://www.tohoho-web.com/html/attr/contenteditable.htm

上記の仕組を利用したプラグイン（GitHub）
https://github.com/diy/jquery-emojiarea

お礼

回答ありがとうございます。

素晴らしいです！
この方法が最も理想的かも知れません。

細かく解説までしていただき本当にありがとうございました。

紹介していただいたプラグインを参考にUIを作成してみたいと思います。

回答No.2

b0a0a

いくつものテキストエリアを組み合わせれば楽かな
実際はこうなる感じで
<textarea>
あああ
</textarea>
■（←画像）
<textarea>
いいい
</textarea>

で、画像の右上に×ボタンおいて押されると消えるみたいな感じなら

お礼

回答ありがとうございます。

画像が入る→テキストエリア終了タグ挿入→IMGタグを挿入→テキストエリア開始タグ挿入
最終的に複数のテキストエリアのvalue値と画像のURLを配列としてPOSTするということですね。
なるほど。この発想はありませんでした。
これなら編集中の画像の表示は簡単にできそうですね。

画像が連続する場合や画像の位置を変更する場合などに別の問題も浮上してきそうですが・・
素晴らしいアイディアありがとうございます。

回答No.1

bara-s

textareaというのはテキストを入力するための領域なので本質的にそういう使い方はできません。

CSSでtextareaの背景をno-repeat指定して適切なマージンを取れば見た目上は画像の表示を行うことはできるかもしれませんが・・・相当面倒なことになりそうですね。
textareaの変更を監視してプレビューを生成するのが比較的簡単だと思いますがどうでしょうか？

お礼

回答ありがとうございます。

やはりtextareaに直接画像を
表示させるのは不可能みたいですね。

CSSのbackgroundによる表示では
・タグそのものを隠すためにvalue値を書き換える必要がある
・スクロール時に位置が合わない
・サムネイル表示できない（CSS3非対応ブラウザ）
・複数枚表示できない（CSS3非対応ブラウザ）
など、ご指摘の通り相当面倒な上に実用的とは言えないですよね。

とは言え、画像タグやURLをそのまま表示させることは
HTMLが分からないクライアントにとって冗長な記号の羅列でしかなく
やはり実用的なUIとは考えにくいです。

jqueryなどで擬似的にテキストエリアを作成し
ajaxで非同期表示させるようなプラグインを
探してみたのですがなかなか見つからず、
今回質問させていただきました。