Today, We are going to learn Laravel 10 CKEditor Image Upload Example – A Comprehensive Guide. Laravel, a popular PHP web application framework, is known for its elegant syntax and flexibility. It enables developers to build applications of various complexities with ease.
CKEditor, on the other hand, is a widely-used WYSIWYG (What You See Is What You Get) editor that allows users to create content with rich text formatting. In this blog post, we’ll walk you through a step-by-step guide to integrate CKEditor in your Laravel 10 application and implement image uploading functionality.
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

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!