htmlのtext欄の任意の場所に画像を導入する方法

Question

現在

商品の説明ボックスを作成中になります

そこで下記のように
まずテキストを作成して任意の場所にimageタグが入るようにしました(もっといい方法がありましたら教えて頂けると助かります)

textの任意の場所に画像を導入するタグなどはあるのでしょうか

商品説明欄
<input type=text>

画像導入
<input type="file">

textの中のポインタが当たっている場所に
画像導入ボタンをおしたらエクスプローラーが開いてfairuを導入できる
ようにしたいのですが

上記の方法ではうまくいきません

ご指揮いただけると助かります

よろしくお願いいたします。

下記のような感じを作りたいです

Answer 1

<input type=text>の欄に画像を表示したいということであれば仕様上無理です
inputタグはユーザーに入力を促すものなのでimgタグを入れるという状況も想定しづらいです

Comments

[nguyenseiji]

ご連絡ありがとうございます。

上記のような感じの仕様をくみたいのですが

どのような感じで組めばいいのでしょうか

ぜひ、ご指揮いただけると助かります

やはりphpなどを使うのでしょうか

[yambejp]

表示するファイルはどこから持ってくるのでしょうか？
・ネット上に予めあがっているのですか？
・input type="file"でテキストと一緒に送るのですか？

画像については実はbase64を使えば、htmlに埋め込むことも可能なので
不可能とは言いませんが、ちょっと煩雑なのは間違いありません

[nguyenseiji]

ご連絡ありがとうございます。

input type="file"で一度サーバーのフォルダに入れて

同時にテキストと一緒にPHPのPOSTで受け取る想定です

[yambejp]

すでにサーバー上にある画像であればimgタグでsrcを指定すればいいでしょう。
テキストボックスやテキストエリアには直接埋め込めませんが、
インタラクティブなプレビュー画面を作ればWYSIWYGな画面も作れます

Answer 2

一発ではできません。

ブログ記事の編集機能のようなUIを想定しているのかと思いますが、
textarea要素の入力に対して、CSSにて、画像を上に重ねるように、JavaScriptにて要素を追加したり、行揃えをしたり、それをプレビューするようにしているものと思われます。
様々な技術を複合して、実装しているわけです。

既存のブログやCMSの画面の要素検証をして参考にして自作するか、
ライブラリなどは存在してると思うので、
ライブラリの調査と、導入を検討するのがいいかと。

Comments

[nguyenseiji]

CKEditorを使う事にしました
ライブラリの存在は知らなかったので
良かったです
ありがとうございました。