導入編はこちら
やること
- 画像アップロード用のルーティング追加
- 上記ルーティングで使用するController & メソッド作成
php artisan storage:link
する- 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')
の引数部分には上で作成したルーティング名を指定する
これでアップロードできるようになった
Laravelプロジェクトで使用しているリッチエディタ、
ckeditorの中で画像をアップロードできるようにしたメモ