【Laravel7,8】リッチエディタ(ckeditor)で画像アップロード実装

えびさん

Laravelプロジェクトで使用しているリッチエディタ、
ckeditorの中で画像をアップロードできるようにしたメモ

導入編はこちら

やること

  1. 画像アップロード用のルーティング追加
  2. 上記ルーティングで使用するController & メソッド作成
  3. php artisan storage:linkする
  4. JavaScript部分を変更する

画像アップロード用のルーティング追加

  • routes/web.php
Route::post('ckeditor/upload', 'CkeditorController@upload')->name('ckeditor.upload');

URLやController、メソッド名はお好みでOK

Controller & メソッド作成

  • app/Http/Controllers/CkeditorController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CkeditorController extends Controller
{
    /**
     * Ckeditorの画像をアップロードする
     *
     * @param Request $request
     */
    public function upload(Request $request)
    {
        if ($request->hasFile('upload')) {
            $file = $request->file('upload');
            // 保存用ファイル名を生成
            $storeFilename =
                // ファイル名
                pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME).
                // 名前が重複しないようにアップロードした時間をつけとく
                '_'. time(). '.'.
                // 拡張子をつける
                $file->getClientOriginalExtension();

            // アップロード処理
            $file->storeAs('public/uploads', $storeFilename);
            // ckeditor.jsに返却するデータを生成する
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('storage/uploads/'. $storeFilename);
            $msg = 'アップロードが完了しました';
            $res = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";

            // HTMLを返す
            @header('Content-type: text/html; charset=utf-8');
            echo $res;
        }
    }
}

php artisan storage:linkする

画像をstorageに保存するために下記コマンド実行
既に実行済みの場合はスルーでOK

php artisan storage:link

JS部分を変更する

<script src="{{ asset('ckeditor/ckeditor.js')}}"></script>
<script>
    CKEDITOR.replace('ckeditor', {
        filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token() ]) }}",
        filebrowserUploadMethod: 'form'
    });
</script>

route('ckeditor.upload')の引数部分には上で作成したルーティング名を指定する

これでアップロードできるようになった

\ 案件のご依頼・ご相談はこちらから /