How to Integrate the CKEditor Image Upload Feature in the Laravel Framework

In this tutorial, we will explore how to integrate the image upload feature in CKEditor within the Laravel 10 framework. This integration will allow you to easily upload and insert images into your web content. CKEditor is a powerful WYSIWYG (What You See Is What You Get) editor that simplifies the process of creating, formatting, and editing text content in your web application. Let’s dive into the step-by-step process of adding this feature to your Laravel project.

Table of Contents

Step 1: Install Laravel

If you haven’t already, start by creating a new Laravel project. Open your terminal or command prompt and run the following command:

composer create-project laravel/laravel example-app

This command will set up a fresh Laravel application.

Step 2: Create Routes

In this step, you’ll need to define routes for CKEditor. Open the routes/web.php file and add the following routes:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CkeditorController;

Route::get('ckeditor', [CkeditorController::class, 'index']);
Route::post('ckeditor/upload', [CkeditorController::class, 'upload'])->name('ckeditor.upload');

These routes will handle the CKEditor page and image uploads.

Step 3: Create a Controller

Next, create a controller named CkeditorController with two methods: index and upload. Ensure you have a “media” folder in your public directory to store uploaded images. Here’s the controller code:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;

class CkeditorController extends Controller
{
    public function index(): View
    {
        return view('ckeditor');
    }

    public function upload(Request $request): JsonResponse
    {
        if ($request->hasFile('upload')) {
            $originName = $request->file('upload')->getClientOriginalName();
            $fileName = pathinfo($originName, PATHINFO_FILENAME);
            $extension = $request->file('upload')->getClientOriginalExtension();
            $fileName = $fileName . '_' . time() . '.' . $extension;

            $request->file('upload')->move(public_path('media'), $fileName);

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

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

This controller handles both displaying the CKEditor page and managing image uploads.

Step 4: Create the View File

In this final step, create a Blade view file named ckeditor.blade.php. This file will display a form with CKEditor and include the CKEditor library. Here’s the content of the view:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel CKEditor Image Upload Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .ck-editor__editable_inline {
        min-height: 300px;
    }
    </style>
</head>
<body>
    
<div class="container">
  
    <h1>Laravel CKEditor Image Upload Example</h1>
  
    <form>
  
        <div class="form-group">
            <strong>Title:</strong>
            <input type="text" name="title" class="form-control" placeholder="Title" value="{{ old('title') }}">
        </div>
  
        <div class="form-group">
            <strong>Slug:</strong>
            <input type="text" name="slug" class="form-control" placeholder="Slug" value="{{ old('slug') }}">
        </div>
  
        <div class="form-group">
            <strong>Body:</strong>
            <textarea name="editor" id="editor"></textarea>
        </div>
  
        <div class="form-group">
            <button class="btn btn-success" type="submit">Submit</button>
        </div>
  
    </form>
      
</div>
     
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'), {
            ckfinder: {
                uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
            }
        })
        .catch(error => {
              
        });
</script>
     
</body>
</html>

This view file contains the form with CKEditor and necessary JavaScript code for CKEditor integration.

Running Your Laravel App

To see the CKEditor image upload feature in action, run your Laravel application. Open your terminal and enter the following command:

php artisan serve

Then, access the application in your web browser:

http://localhost:8000/ckeditor

You can now create and edit content with the CKEditor image upload feature integrated into your Laravel application.

Step 1: Install Laravel

Step 2: Create Routes

Step 3: Create a Controller

Step 4: Create the View File

Running Your Laravel App

About Yogesh Koli