Laravelとsummernote連携:画像をサーバーにファイル形式で保存する方法

Laravel とリッチテキストエディタ

summernoteの画像はアップロード時にテキストに変換されてデータベースに保存されます。

ですが、画像はきちんとサーバーにファイル形式で保存したいですよね。

Ajax(エイジャックス)を利用すれば、アップロード後に自動で、画像をサーバーにファイル形式で保存できます。

手順をひとつずつ解説していきますね。

サンプルは別ページにご用意してあるので、仕上がりを確認したい場合は、最初にこちらを見てみてください。

じゅんこ
じゅんこ

今回はまず画像のリアル表示部分まで。

後半ではフォームを作成・保存まで進めていきます。

Laravelでsummernote使用時、画像をリアルタイム表示させる方法

まずはLaravelにsummernoteエディタを搭載していきます。

①Laravelのルート設定を行う

最初にLaravelのルート設定を行っておきましょう。

今回はエディタ表示用画像保存用の2つのルート設定を用意しておきます。

②Laravelのコントローラーを準備する// エディタ表示画面用

次にコントローラーを準備します。

下記コマンドでコントローラーを新規作成します。

app/Http/Controllersの中に Summernote.php コントローラーファイルができます。

ファイルを開き、まずはSummernoteのエディタ画面表示用のコードを入れていきます。

次に画像ファイル保存用のコードを入れます。

今回は【temp】フォルダの中にファイルが保存されるようにします。

publicフォルダの中にtempフォルダを作成しておいてください。

なお、これまでLaravelで画像保存を行ったことがない場合は、先にシンボリックリンクを作成しておきましょう。

シンボリックリンクってなに?

じゅんこ
じゅんこ

という方は、下記記事も併せて読んでくださいね。

③ビューファイルを準備する

それではいよいよ、summernoteエディタ搭載を行います。

といっても、下記のコードをいれるだけ。

今回はBootstrap4対応のエディタを使っています。

上記コードはsummernote公式サイトに掲載されたものをそのまま使用しています。

ご希望に合わせてレイアウト等変更を加えてください。

LaravelではCSRFに関する記述を忘れるとエラーになります!

Laravelで使うポイントとしては、csrf_token についてのコードを忘れずに入れること。

CSRFに関する記述を入れ忘れると、419 (unknown status) エラーになります。

CSRF(シーサーフ)対策はセキュリティ上非常に大事。

CSRFなんて聞いたことないけど。

じゅんこ
じゅんこ

そんな方は、こちらの記事でぜひ、概要を知っておいてください。

大事です!

④アップロード後に画像をエディタに表示するコードを追加

次に script 部分に処理を加えて、アップロードした画像がリアルタイムで表示されるようにしていきます。

<script></script>部分を下記のように書き替えてください。

ajaxの中で、またもや csrf-token について記述が必要になります。

url の部分では、最初に画損保存用にルート設定したURLを入れます。

これで、ざっとこんなエディタが出来上がります。

エラーになる場合は、URLの記述を見直してみて

エラーになる場合は、<script></script>の中の画像保存用URLを見直してみてください。

ここのURLは今いる場所を起点にします。

今回は、次のようにルートを設定しました。

summernoteエディタを設置したページのURL は【’/summernote/create’】。

画像を保存する場所は【’/summernote/temp’】。

summernoteの部分までは同じなので、ここまでは入れる必要がありません。

じゅんこ
じゅんこ

というより、入れてはいけません。

scriptタグ内の画像保存用URLは、下記のように、summernote以降の部分のみ記述します。

最後に:このあとデータベースに保存するには

この後は、通常どおりフォームを作成し、保存してあげればOKです。

方法がイマイチ分からない方は、後半も併せて読んでくださいね。

じゅんこ
じゅんこ

また後半でお会いしましょー

コメント

タイトルとURLをコピーしました