Laravel 10 CKEditor Image Upload Example - A Comprehensive Guide

Prerequisites

Before we dive in, make sure you have the following:

A basic understanding of Laravel and PHP.
Laravel 10 installed on your local machine.
Composer, the PHP dependency management tool.
A code editor of your choice.

Step 1: Create a New Laravel 10 Project

To start, create a new Laravel project using the following command in your terminal:

composer create-project --prefer-dist laravel/laravel ckeditor-image-upload-example

Step 2: Create Routes

In this step, we will add three routes with GET and POST methods in the routes/web.php file.

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');

Step 3: Create Controller

Now, create a new controller named CkeditorController with index() and upload() methods. Ensure that you have a media folder in your public directory as images will be stored there.

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]);
        }
    }
}

Step 4: Create View File

n Last step, let’s create ckeditor.blade.php for display form with CkEditor and put following code:

resources/views/ckeditor.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel CKEditor Image Upload Example - LaravelTuts.com</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">
  
    <div class="text-center flex items-center justift-center my-5">
        <h1 class="">Laravel CKEditor Image Upload Example - LaravelTuts.com</h1>
    </div>
    
    <form>
        <div class="form-group mb-3">
            <label class="mb-1 font-semibold">Title:</label>
            <input type="text" name="title" class="form-control" placeholder="Title" value="{{ old('title') }}">
        </div>
  
        <div class="form-group mb-3">
            <label class="mb-1 font-semibold">Slug:</label>
            <input type="text" name="slug" class="form-control" placeholder="Slug" value="{{ old('slug') }}">
        </div>
  
        <div class="form-group mb-3">
            <label class="mb-1 font-semibold">Body:</label>
            <textarea name="editor" id="editor"></textarea>
        </div>
  
        <div class="form-group mb-3">
            <button class="btn btn-success mb-2" 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>

Run the Laravel App:

All the required steps have been completed. Now, type the following command in the terminal and hit enter to run the Laravel app:

php artisan serve

Next, open your web browser and enter the following URL to view the app output:

http://127.0.0.1:8000/ckeditor

**Laravel 10 CKEditor Image Upload Example**

You should now see a form with the CKEditor integrated, allowing you to upload images directly into the editor. This example demonstrates how to incorporate CKEditor into your Laravel application and enable image uploading functionality.

Conclusion

In conclusion, this tutorial demonstrated how to integrate CKEditor into a Laravel application and implement image uploading functionality.

By following the steps provided, you have successfully created routes, a controller, and a view file that allows users to upload images directly within the CKEditor. This functionality is particularly useful for content management systems and other web applications where users need to create and manage content with embedded images.

Now you can apply this knowledge to enhance your Laravel projects with rich text editing and image uploading capabilities.

Happy coding!