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

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

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

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

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

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

じゅんこ

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

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

Laravelでsummernote使用時、画像をリアルタイム表示させる方法
最後に：このあとデータベースに保存するには

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

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

①Laravelのルート設定を行う

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

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

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

Route::get('/summernote/create', 'Summernote@create')->name('summernote.create');
// 画像保存用
Route::post('/summernote/temp', 'Summernote@image')->name('summernote.image');

Route::get('/summernote/create', 'Summernote@create')->name('summernote.create');

// 画像保存用

Route::post('/summernote/temp', 'Summernote@image')->name('summernote.image');

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

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

php artisan make:controller Summernote

1	php artisan make:controller Summernote

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

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

    public function create(){
        return view('admin.summernote');
    }

public function create(){

return view('admin.summernote');

}

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

    public function image (Request $request){
        $result=$request->file('file')->isValid();
        if($result){
            $filename = $request->file->getClientOriginalName();
            $file=$request->file('file')->move('temp', $filename);
            echo '/temp/'.$filename;
        }
    }

public function image (Request $request){

$result=$request->file('file')->isValid();

if($result){

$filename = $request->file->getClientOriginalName();

$file=$request->file('file')->move('temp', $filename);

echo '/temp/'.$filename;

}

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

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

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

php artisan storage:link

1	php artisan storage:link

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

じゅんこ

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

画像アップロード機能を投稿フォームにつける【初心者のLaravel入門講座】

Laravelで投稿フォームに画像のアップロード機能を付ける方法を解説していきますね。画像を保存するために、storeAs と getClientOriginalNameを使っていきます。 *バージョンはLaravel8を使っ...

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

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

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

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>
Without Bootstrap

<head>

<title>Summernote with Bootstrap 4</title>

</head>

<body>

$('#summernote').summernote({

placeholder: 'Hello Bootstrap 4',

tabsize: 2,

height: 100

});

</script>

</body>

</html>

Without Bootstrap

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

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

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

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

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

    <meta name="csrf-token" content="{{ csrf_token() }}">

1	<meta name="csrf-token" content="{{ csrf_token() }}">

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

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

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

じゅんこ

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

大事です！

webサイトセキュリティでPHP初心者でも知っておくべきリスクと対策

PHPでWebサイトを作るなら、セキュリティに関する4つのリスクと対策が必要になります。「セキュリティってよくわからないなぁ。」 40歳でプログラミングを学びはじめた私は、こんなふうに感じていました。ただ、自分が作った...

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

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

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

<script>
    jQuery(document).ready(function($) {
    $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100,

  
     callbacks: {
      onImageUpload : function(files, editor, welEditable) {
         for(var i = files.length - 1; i >= 0; i--) {
                 sendFile(files[i], this);
          }
      }
     } 
 });

  function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file', file);
  
    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      data: form_data,
      type: "POST",
      contentType: 'multipart/form-data',
      // 画像保存用のルート設定
      url: 'temp',
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) {
        $(el).summernote('editor.insertImage', url);
      }
    });
  }
});
</script>

jQuery(document).ready(function($) {

$('#summernote').summernote({

placeholder: 'Hello Bootstrap 4',

tabsize: 2,

height: 100,

callbacks: {

onImageUpload : function(files, editor, welEditable) {

for(var i = files.length - 1; i >= 0; i--) {

sendFile(files[i], this);

}

});

function sendFile(file, el) {

var form_data = new FormData();

form_data.append('file', file);

$.ajax({

headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

data: form_data,

type: "POST",

contentType: 'multipart/form-data',

// 画像保存用のルート設定

url: 'temp',

cache: false,

contentType: false,

processData: false,

success: function(url) {

$(el).summernote('editor.insertImage', url);

}

});

}

});

</script>

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

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

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

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

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

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

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

// エディタ表示画面用 
Route::get('/summernote/create', 'Summernote@create')->name('summernote.create'); 
// 画像保存用 
Route::post('/summernote/temp', 'Summernote@image')->name('summernote.image');

// エディタ表示画面用

Route::get('/summernote/create', 'Summernote@create')->name('summernote.create');

// 画像保存用

Route::post('/summernote/temp', 'Summernote@image')->name('summernote.image');

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

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

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

じゅんこ

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

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