LaravelでCKEditorを使用した画像のアップロード方法

CKEditorのセットアップ: まず、LaravelプロジェクトにCKEditorをインストールしましょう。CKEditorは、WYSIWYGエディタであり、画像アップロード機能を提供します。以下のコマンドを使用して、CKEditorをインストールします。

composer require ckeditor/ckeditor

インストールが完了したら、CKEditorの設定ファイルを生成します。

php artisan vendor:publish --tag=ckeditor

画像アップロードのためのルート設定: 次に、画像のアップロードを処理するためのルートを設定しましょう。routes/web.phpファイルを開き、以下のようなルートを追加します。

Route::post('/upload-image', 'ImageController@upload')->name('upload.image');

画像アップロード用のコントローラ作成: ImageControllerを作成し、画像のアップロード処理を実装しましょう。以下は、ImageControllerの例です。

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
    public function upload(Request $request)
    {
        $uploadedImage = $request->file('upload')->store('public/images');
        $url = asset('storage/images/' . basename($uploadedImage));
        return response()->json(['url' => $url]);
    }
}

CKEditorの設定: CKEditorの設定ファイルであるconfig.jsを編集し、画像アップロード用のURLを設定します。以下は、config.jsの例です。

CKEDITOR.editorConfig = function (config) {
    // 他の設定...
    config.filebrowserUploadUrl = '/upload-image';
};

ブログ投稿フォームの作成: 最後に、ブログ投稿フォームを作成しましょう。CKEditorを使用するテキストエリアに画像アップロード機能を追加します。以下は、ブログ投稿フォームの例です。

<form action="/submit-blog" method="POST">
    @csrf
    <textarea name="content" id="editor"></textarea>
    <button type="submit">投稿する</button>
</form>
<script src="{{ asset('vendor/ckeditor/ckeditor.js') }}"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .catch(error => {
            console.error(error);
        });
</script>

これで、LaravelでCKEditorを使用して画像のアップロードができるようになりました。ブログ投稿フォームから画像をアップロードし、CKEditorで編集することができます。