Laravel 9 - How to Use Ckeditor and Upload Image Using Ckeditor

Laravel 9 - How to Use Ckeditor and Upload Image Using Ckeditor

 Laravel 9 - How to Use Ckeditor and Upload Image Using Ckeditor

Hello Artisans, today I'll talk about how to integrate and upload an image using CkeditorCkeditor is a fully-featured WYSIWYG editor which comes with a lot of features. You can find more here. So, let's see how we can use it in our Laravel Application.

Note: Tested on Laravel 9.2.

  1. Create and Setup blade File
  2. Create and Setup Controller
  3. Define Routes
  4. Output

Create and Setup blade File

In this step, first we'll create a blade file called ckeditor.blade.php where we'll integrate ckeditor. So, create a file under the resources/views/ckeditor.blade.php and put the below codes.

<!DOCTYPE html>
    <title>Laravel 9 Ckeditor Image Upload Example -</title>

<h1>Laravel 9 Ckeditor Image Upload Example -</h1>
<textarea name="editor1"></textarea>

<script src=""></script>
<script type="text/javascript">
    CKEDITOR.replace('editor1', {
        filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'


Create and Setup Controller

Now we'll create a controller where we'll write our logic to show the ckeditor and upload the image using Ckeditor. So, fire the below command in the terminal

php artisan make:controller CkeditorController

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CkeditorController extends Controller
    public function index()
        return view('ckeditor');

    public function upload(Request $request)
        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('images'), $fileName);

            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('images/'.$fileName);
            $msg = 'Image uploaded successfully';
            $response = "<script>$CKEditorFuncNum, '$url', '$msg')</script>";

            @header('Content-type: text/html; charset=utf-8');
            echo $response;

Define Routes

Now we will define routes for viewing the Ckeditor and where we'll upload our image through the Ckeditor. Put these below routes in your web.php.

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


Now we are ready with our setup. It's time to check our output. Now go to If everything goes well you'll find the below output.

Thanks for reading :)

StarCode Kh

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

Previous Post Next Post