we will guide you through the process of integrating CKEditor 5 with image upload functionality in your Laravel 11 application. CKEditor 5 is a powerful and versatile rich text editor that allows you to include various types of content in your web applications, including images. Let’s dive into the steps required to set this up.

Step 1: Add a Textarea with CKEditor ID

First, we need to add a textarea to our form and assign it an ID of ckeditor. This ID will be used to initialize CKEditor on this textarea.

Here's how you can add the textarea in your Blade view file:

<textarea name="description" id="ckeditor" class="form-control" placeholder="Description goes here..">{{ old('description') }}</textarea>

This textarea will serve as the input field where users can write and format their text, as well as upload images.

Step 2: Include CKEditor 5 from CDN

Instead of installing CKEditor 5 using npm, we will include it directly from a CDN. Add the following script to your Blade view file:

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

This script includes CKEditor 5 from the official CDN.

Step 3: Initialize CKEditor 5

Now, we need to initialize CKEditor 5 on our textarea. To do this, add the following JavaScript code to your Blade view file. You can place this code at the bottom of your view file or in a separate JavaScript file.

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


    <script>


      ClassicEditor


          .create( document.querySelector( '#ckeditor' ),{


            ckfinder:{


              uploadUrl:"{{route('ckeditor.upload',['_token'=>csrf_token()])}}",


            },


          } )


          .catch( error => {


              console.error( error );


          } );


  </script>

This script initializes CKEditor on the textarea with the ID ckeditor and configures it to use the image upload URL.

Step 4: Create the Image Upload Route and Controller Method

Next, we need to create a route and a controller method to handle the image upload. Add the following route to your web.php routes file:

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

Now, create a new controller named CKEditorController if you don't have one already, and add the following method to handle the image upload:

namespace App\Http\Controllers;
use Illuminate\Http\Request;

use Illuminate\Support\Facades\Storage;

use Illuminate\Support\Facades\Validator;

class CKEditorController extends Controller

{

   

 public function upload(Request $req)

    {


        if($req->hasFile('upload')):


            $image=$req->file('upload');


            $ext=$image->extension();


            $file=time().'.'.$ext;


            $image->move('uploads/',$file);


            $url = asset('uploads/'.$file);


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


        endif;


    }


}

This method validates the uploaded image, stores it in the public/uploads directory, and returns the URL of the uploaded image in JSON format.

Step 5: Test the CKEditor

Now, you should be able to use CKEditor 5 with image upload functionality in your Laravel 11 application. Open your form in the browser, add some text, and try uploading an image. The image should be uploaded to the public/uploads directory and displayed within the editor.

Conclusion

By following these steps, you have successfully integrated CKEditor 5 with image upload functionality into your Laravel 11 application using a CDN. This setup allows users to write rich text content and upload images directly within the text editor. CKEditor 5 offers a robust and user-friendly interface, making it a great choice for any web application that requires rich text editing capabilities.

Happy coding!