Q&A
画像の何を挿入するんでしょう。
また「任意の位置」の定義を考えた方が良いです。
何もないところからなのか、文章があるときなのか
カーソル位置は取れます。
掲示板にコメントを書き込む際にtextareaタグを使っています
画像をアップロードする際に任意の位置に画像を挿入する方法を探しています
どうするのが一般的でしょうか
画像アップロード処理はPHPで処理します
アップロードするタグはfileタグを使います
textareaに画像そのものは張れないので、任意の場所に、というのはどうしたらいいんでしょうか
textareaへの入力「
花の画像です
ここに花の画像
空の画像です
ここに空の画像
花と空の画像です
花と空の画像」
といった感じに処理したいです
teratailだと画像を任意の位置に挿入できます
本文
(ファイル名)
あいうえお
(ファイル名)
かきくけこ
このように文と文の間に識別させる画像を識別する文字列を入れて、
アップロード後置換のようなやり方しか思い浮かばなかったため、
ほかに方法はないのかと聞いてみました
teratailのは画像そのものがテキストエリアに入ってるわけではなくアップロードされた画像と紐づける文字列を挿入して表示時にhtmlとしてimgタグに変換しているだけです。
つまり、思いつかれた方法と同じ
それが一般的なやり方でいいでしょうか？
「選択と同時にアップロードして紐づける文字列を生成してカーソル位置にその文字列を挿入」ですね。
imgタグへの変換は表示時という点は同じ。
リアルタイムで編集後の状態が出るのはそれはそれで非同期で通信して変換結果を表示させているということになります。
＞それが一般的なやり方でいいでしょうか？
何を「一般的」とするかによるのでは。
私の方はあくまで「teratailではそうなってる」と伝えただけです。
結局はHTMLとして表示させられれば良いので、過程はなんであろうと良いとは思います。
つまり「思いついた方法」で実現できてるなら特に問題ないということです。
回答4件
0
ベストアンサー
ほかに方法はないのか
入力欄の文中に画像を入れる方法ということで言えば、例えばTwitterでは文中に絵文字の画像を直接表示することができていますが、これはcontentEditableがtrueのDIV要素で実現されています。
(追記)
注: 「絵文字の画像」とは、フォントとして表示される絵文字のグリフのことではなく、Twitterにおいて入力欄で使われている画像ファイルとして表示された絵文字の絵のことです。
投稿2021/11/13 16:47
編集2021/11/16 00:54
総合スコア3047
絵文字は .jpg や .png 等の画像とは話が違うと思いますけど？ 例えば以下のような絵文字のコードを直接 html に含めて、
<p>ℹ ⌚ ⌛ ⏰ ⏳ ☀</p>
ブラウザのフォントによって違いはありますが、以下のように「絵」として表示されます。
ℹ ⌚ ⌛ ⏰ ⏳ ☀
ちなみに、Twitter は Chrome, Edge などのブラウザで見る限りですが、img 要素に変換しているようです。
↓ ブラウザで表示してディベロッパーツールで見てください。
https://twitter.com/SurferOnWww/status/1155656979076882433
ええと? ですからそのimg要素のことを言っているのですが。
おっと、確認したらbackground-image付きのSPANでしたが、なんにせよその入力欄の中で使われている画像の要素について言っています。
一般の、文字として表示される絵文字ではなく、Twitterで使われている「絵文字の画像」です。
> ええと? ですからそのimg要素のことを言っているのですが。
話が通じてますか？ 絵文字と言うと、
https://atmarkit.itmedia.co.jp/ait/articles/1407/03/news113.html
に書かれているように、一般的な文字と同様にコードがアサインされていてそれに対するフォントを使って表示されるのです。Unicode の U+0041 が 'A' と表示されるのと同じです。
.png とか .jpg のような画像ではないので普通は img 要素を使って表示するようなものではないです。
> 一般の、文字として表示される絵文字ではなく、Twitterで使われている「絵文字の画像」です。
そもそも質問では Twitter の話はしてないと思いますけど？
質問の本題は textarea を使って書き込みを行う際 .png とか .jpg のような画像を文章の中にどうやって配置するかということと理解しています。
Twitter での絵文字の扱いは、本来文字コードをそのままレンダリングすればブラウザの持っているフォントで表示するものを、わざわざ .png 画像を別に用意して img タグを使ってそれに差し替えるというごく特別なことを行っています。
> 絵文字と言うと、 ～ .png とか .jpg のような画像ではないので普通は img 要素を使って表示するようなものではないです。
> Twitter での絵文字の扱いは、 ～ img タグを使ってそれに差し替えるというごく特別なことを行っています。
繰り返しになりますが、「ですからそのimg要素のことを言っているのですが。」
ただ、本質ではありませんが、この時点では勘違いしており実際には入力欄の絵文字画像はツイート表示のものと異なりimgでなくspanでした。
Twitterではツイート表示のみならず、入力欄内の絵文字もspanで画像に差し替えられています。
> そもそも質問では Twitter の話はしてないと思いますけど？
そうですね。私が挙げた例なので。
> 質問の本題は textarea を使って書き込みを行う際 ～ と理解しています。
私はtextareaを使うことは必要な要件ではないと理解しましたので、「ほかに方法はないのか」に対する回答として、入力欄の文中に直接画像を入れる、div要素を使う案を提案しました。その際、実際に使われている例としてTwitterの入力欄を挙げました。
> 繰り返しになりますが、「ですからそのimg要素のことを言っているのですが。」
あなたの回答、
> Twitterでは文中に絵文字の画像を直接表示することができています
を私が読んで理解した限り「絵文字」の話としか思えなかったのですけど。
Twitter は文中にある絵文字のコード、例えば U+2139 を以下のような img 要素に変換して表示しますが、それはあくまで Twitter 内部での操作の結果にすぎず、あなたの回答は絵文字の話から始まっているのではないですか？
<img alt="ℹ" draggable="false" src="https://abs-0.twimg.com/emoji/v2/svg/2139.svg" class="r-4qtqp9 r-dflpy8 r-sjv1od r-zw8f10 r-10akycc r-h9hxbl">
私の誤解ということであれば、誤解を生む余地が無いよう回答を書き直すか、書き直すのはベストアンサーが付いている今では適切でないなら補足説明を入れておかれてはいかがでしょう？
> Twitterではツイート表示のみならず、入力欄内の絵文字もspanで画像に差し替えられています。
確かに入力欄は span 要素の background-image になりますが、［ツイートする］をクリックして表示されると上のような img 要素になります。どうでもいいことかもしれませんが、念のため。
> 私が読んで理解した限り「絵文字」の話としか思えなかったのですけど。
そうですか。
> あなたの回答は絵文字の話から始まっているのではないですか？
私の話は「入力欄の文中に画像を入れる方法」から始まっています。
> 誤解を生む余地が無いよう回答を書き直すか～
まあ明示して悪いこともないので注を追加しておきます。
0
質問から外れてしまうかもしれないですが、お探しのものはWYSIWYGエディタのライブラリではないでしょうか。
投稿2021/11/13 01:10
総合スコア36163
0
teratailだと画像を任意の位置に挿入できます
やり方はいろいろでしょうが teratail でどうなっているかと言うと入力欄は textarea で、textarea には文字列しか入力できないので、ここのように画像データを含めて文字列で記録してどこかに保存し、
表示する際はその文字列データから別に html ソース（画像の img タグを含む）を作って表示しているようです。
投稿2021/11/13 01:02
退会済みユーザー
総合スコア0
0
それと同じことがHTMLで行われてます。
それと同じようにすればいいというはなしでは
投稿2021/11/12 23:46
総合スコア87800
あなたの回答
tips
プレビュー
