summernoteの画像はアップロード時にテキストに変換されてデータベースに保存されます。
ですが、画像はきちんとサーバーにファイル形式で保存したいですよね。
Ajax（エイジャックス）を利用すれば、アップロード後に自動で、画像をサーバーにファイル形式で保存できます。
手順をひとつずつ解説していきますね。
サンプルは別ページにご用意してあるので、仕上がりを確認したい場合は、最初にこちらを見てみてください。
今回はまず画像のリアル表示部分まで。
後半ではフォームを作成・保存まで進めていきます。
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');
次にコントローラーを準備します。
下記コマンドでコントローラーを新規作成します。
php artisan make:controller Summernote
app/Http/Controllersの中に Summernote.php コントローラーファイルができます。
ファイルを開き、まずは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;
}
}
今回は【temp】フォルダの中にファイルが保存されるようにします。
publicフォルダの中にtempフォルダを作成しておいてください。
なお、これまでLaravelで画像保存を行ったことがない場合は、先にシンボリックリンクを作成しておきましょう。
php artisan storage:link
シンボリックリンクってなに？
という方は、下記記事も併せて読んでくださいね。
③ビューファイルを準備する
それではいよいよ、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
今回はBootstrap4対応のエディタを使っています。
上記コードはsummernote公式サイトに掲載されたものをそのまま使用しています。
ご希望に合わせてレイアウト等変更を加えてください。
LaravelではCSRFに関する記述を忘れるとエラーになります！
Laravelで使うポイントとしては、csrf_token についてのコードを忘れずに入れること。
<meta name="csrf-token" content="{{ csrf_token() }}">
CSRFに関する記述を入れ忘れると、419 (unknown status) エラーになります。
CSRF（シーサーフ）対策はセキュリティ上非常に大事。
CSRFなんて聞いたことないけど。
そんな方は、こちらの記事でぜひ、概要を知っておいてください。
大事です！
④アップロード後に画像をエディタに表示するコードを追加
次に 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>
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');
summernoteエディタを設置したページのURL は【’/summernote/create’】。
画像を保存する場所は【’/summernote/temp’】。
summernoteの部分までは同じなので、ここまでは入れる必要がありません。
というより、入れてはいけません。
scriptタグ内の画像保存用URLは、下記のように、summernote以降の部分のみ記述します。
url: 'temp',
最後に：このあとデータベースに保存するには
この後は、通常どおりフォームを作成し、保存してあげればOKです。
方法がイマイチ分からない方は、後半も併せて読んでくださいね。
また後半でお会いしましょー
コメント