Laravel 11 CKeditor 5 Image Upload Example

In CKEditor 5, ckFinder allows users of upload image feature in a text editor on Laravel 11 form.

Let’s start to create WYSIWYG editor with image upload feature using ckEditor 5 with ckFinder library:

Step 1: Create Blade View

Create ckeditor.blade.php file in resources/views/ folder and add textarea input field in it:

<!DOCTYPE html>
<html>
<head>
     <title>Laravel 11 CKEditor Image Upload Tutorial - ItcodStuff.com</title>
  <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .ck-editor__editable_inline {
        min-height: 300px;
    }
    </style>
</head>
<body>
    
<div class="container mt-2">
  
    <h1>Laravel 11 CKEditor Image Upload Tutorial - ItcodStuff.com</h1>
  
    <form>
  
        <div class="form-group mt-2">
            <textarea name="editor" id="editor"></textarea>
        </div>
  
        <div class="form-group">
            <button class="btn btn-success" type="submit">Submit</button>
        </div>
  
    </form>
      
</div>
     
</body>
</html>

Step 2: Integrate CKEditor 5 Using CDN

In your resources/views/ckeditor.blade.php file, include CKEditor 5’s CDN link within the head section:

<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>

Step 3: Initializing Image Upload in CKEditor 5

Intialize image upload feature in text editor in your resources/views/ckeditor.blade.php file, include CKEditor 5’s script in it:

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ),{
            ckfinder: {
                uploadUrl: '{{route('upload.image').'?_token='.csrf_token()}}',
            }
        })
        .catch( error => {
              
        } );
</script>

Step 4: Create a Route

In your routes/web.php file, create a route to access the CKEditor view:

use Illuminate\Support\Facades\Route;

Route::get('/ckeditor', function () {
    return view('ckeditor');
});

use App\Http\Controllers\FileUploadController;

Route::post('/upload-image', [FileUploadController::class, 'upload'])->name('upload.image');

Step 5: Implement Image Upload Logic

In your controller file, implement image upload logic to store image in folder:

    public function upload(Request $request)
    {
        $uploadedImage = $request->file('upload');

        $fileName = $uploadedImage->getClientOriginalName();

        $uploadedImage->move(public_path('images'), $fileName);

        $url = asset('images/' . $fileName);

        return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
    }

Step 6: Test Your CKEditor Integration

You can now run your Laravel development server by using the following command:

php artisan serve

Hit http://localhost:8000/ckeditor url on your browser to see the CKEditor 5 with image upload into your Laravel 11 project using CDN and Bootstrap 5.