Q&A
可能であれば、回答内容をどのように理解して解決としたか回答にコメントいただけたらと。
https://teratail.com/help/question-tips#questionTips4-2
前提・実現したいこと
noteというブログサービスや、このteratailのように編集中のテキストに画像をアップロードすると自動的に保存され、表示される機能を、僕がLaravelでつくっているサービスにも実装したいのですが、やり方が見つからず苦戦しております。
試したこと
<textarea>を使用せず、<div contenteditable=true></div>を使用するような記事は何個か見つけました。 こちらの記事などです。→[https://qiita.com/kittaka/items/eba98a07aa82f7ec4d64](https://qiita.com/kittaka/items/eba98a07aa82f7ec4d64) JSの知識が全くと言ってないので何とかしてPHPで実装できないでしょうか？ もしくはそういったLaravelのライブラリなどがあれば教えていただきたいです。 ### 補足情報（FW/ツールのバージョンなど） Laravel Framework 5.5.45 PHP 7.3.4 実行環境 Homestead
回答2件
0
ベストアンサー
teratailの仕組みは挙動から察するに、ファイル選択した画像をinput fileのonchangeイベントにてAjaxでアップロードし、
システム側から一意の名称をつけてその画像を埋め込んでいるように見受けられます。
「その画像を埋め込んで」とはいっても実際に行われているのはマークダウンの機能の一環ですね。
例えば下記は↓
という文字列で埋め込まれていますが**![イメージ説明]が画像であり、そのあとに続く()内にある文字列が画像名である**といったルール付けがされて、プログラムによって画像表示に置換されているようですね。
同じ画像をアップしても別の名称がつけられることから、アップロードのたびに名前をつけていることが推察されます（※つまり質問や回答のマークダウン文字列を削除したところで画像本体は残り続けているということに）
そのあたりはルール付けもあるでしょうし、PHPにもマークダウン関連のプラグインはあるので探してみると良いでしょう。
要は上記のルールにそって文字列を埋め込むように作られているわけですね。
PHPだけでは難しいです。
AjaxでPHPに投げる部分、画像名を受け取ってtextareaのカーソルがあたっている部分に文字列を埋め込む部分はJavaScriptは必須でしょう。
※もっと言えば、リアルタイムプレビュー。
入力した情報を保存しているので「入力のたびに入力情報を置換して表示しつつ保存」というのを実現する必要があります。これもおそらくAjaxですね。
PHPでWebサイトを組むのでしたらおおよそJavaScriptは必須の技術なので、この際身につけておくと良いと思います。
投稿2019/07/03 05:26
編集2019/07/03 06:35総合スコア80848
回答ありがとうございます。いただいた答えを基にいろいろ調べておりました。返信遅れて申し訳ございません。
PHPのマークダウンのプラグインを使用することとPHPだけではこの機能は実装できないということでしたので、この機にJavaScriptの勉強もかねてAjaxを自分のサービスで使えるようにしてみたいと思います。
そうですね。そもそも「画像アップロード」自体はマークダウンの仕組みではありませんので、そこは別途作り込む必要があるということになります。
0
ファイルをドラッグアンドドロップでサーバーにアップしたいのでしょうか？
その場合jsは必須です。
PHP側はあくまでも送られてきたデータを保持するだけの処理になるので
機能としては必要ですが、普通のファイルアップロードやることは同じです
投稿2019/07/03 05:12
総合スコア114757
あなたの回答
tips
プレビュー
