textareaの入力支援を作成しています。
PHPで画像のディレクトリを開き別窓などに一覧表示させ、
その画像をクリックでjQueryでテキストエリアへタグを挿入。
<textarea id="test">
あああ
<img src="hoge.jpg">
いいい
</textarea>
↑のようにIMGタグを挿入する状態までは実装させることが出来るのですが、
UI的に、このIMGタグを画像(サムネ)として表示させたいと考えています。
<textarea id="test">
あああ
■(←画像)
いいい
</textarea>
テキストエリアを監視して置換するなど方法はありそうなのですが
そもそもテキストエリア内で画像を表示させることができるのでしょうか?
何かいいアイディア、あるいはプラグイン等がありましたら教えてください。
No.3ベストアンサー
- 回答日時:
はじめまして。
テキストエリア内に画像を表示する事は、おそらく難しいと思います。
私も以前、質問者様と似たような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 - コンテンツの編集許可(とほほのWWW入門)
http://www.tohoho-web.com/html/attr/contentedita …
上記の仕組を利用したプラグイン(GitHub)
https://github.com/diy/jquery-emojiarea
回答ありがとうございます。
素晴らしいです!
この方法が最も理想的かも知れません。
細かく解説までしていただき本当にありがとうございました。
紹介していただいたプラグインを参考にUIを作成してみたいと思います。
No.2
- 回答日時:
いくつものテキストエリアを組み合わせれば楽かな
実際はこうなる感じで
<textarea>
あああ
</textarea>
■(←画像)
<textarea>
いいい
</textarea>
で、画像の右上に×ボタンおいて押されると消えるみたいな感じなら
回答ありがとうございます。
画像が入る→テキストエリア終了タグ挿入→IMGタグを挿入→テキストエリア開始タグ挿入
最終的に複数のテキストエリアのvalue値と画像のURLを配列としてPOSTするということですね。
なるほど。この発想はありませんでした。
これなら編集中の画像の表示は簡単にできそうですね。
画像が連続する場合や画像の位置を変更する場合などに別の問題も浮上してきそうですが・・
素晴らしいアイディアありがとうございます。
No.1
- 回答日時:
textareaというのはテキストを入力するための領域なので本質的にそういう使い方はできません。
CSSでtextareaの背景をno-repeat指定して適切なマージンを取れば見た目上は画像の表示を行うことはできるかもしれませんが・・・相当面倒なことになりそうですね。
textareaの変更を監視してプレビューを生成するのが比較的簡単だと思いますがどうでしょうか?
回答ありがとうございます。
やはりtextareaに直接画像を
表示させるのは不可能みたいですね。
CSSのbackgroundによる表示では
・タグそのものを隠すためにvalue値を書き換える必要がある
・スクロール時に位置が合わない
・サムネイル表示できない(CSS3非対応ブラウザ)
・複数枚表示できない(CSS3非対応ブラウザ)
など、ご指摘の通り相当面倒な上に実用的とは言えないですよね。
とは言え、画像タグやURLをそのまま表示させることは
HTMLが分からないクライアントにとって冗長な記号の羅列でしかなく
やはり実用的なUIとは考えにくいです。
jqueryなどで擬似的にテキストエリアを作成し
ajaxで非同期表示させるようなプラグインを
探してみたのですがなかなか見つからず、
今回質問させていただきました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
画面の表示位置を指定させて表...
-
透過pngの透明部分以外をクリッ...
-
(超初心者向け)マウスオーバ...
-
FancyZoom (javascriptで画像拡...
-
サムネイルをクリックすると画...
-
Gifアニメ、最後のコマに行った...
-
画像をフォルダに入れれば表示...
-
jQueryスライドショー画像への...
-
各フォルダから1枚ずつ画像をラ...
-
MAX関数を使ってからLEFT JOIN...
-
HTMLですCSSです 画像のように...
-
アップロードファイルの種類に...
-
Slick.jsのオプションrtlについて
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報