Laravel 11 CKEditor 5 Tutorial

Laravel 11 CKEditor 5 Tutorial

To use CKEditor in laravel 11; Create the form in Blade View and add CKEditor CSS, JS, and scripts to integrate it into Blade View form to create an editor.

CKEditor is a powerful and open-source text editor that enables users to create and format text, links, images, lists, tables, and more within forms. Additionally, CKEditor provides formatting options such as bold, italics, lists, tables, and various other formatting features to enhance the appearance and readability of the content.

Let’s get started integrating and using CKEditor in Laravel forms:

Step 1: Setup New Laravel 11 Project

To install and setup a fresh Laravel 11 application, you can run the following composer commands:

composer create-project --prefer-dist laravel/laravel Blog

Step 2: Create Form in Blade View

Go to the resources/views folder and create blade file name cke-form.blade.php in it, then create a form in cke-form.blade.php file for integration ckEditor; something like this:

<!doctype html>
<html lang="en">
<title>Laravel 11 Integrate CKEditor Example -</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 5 CSS -->
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5+zHxlq1z8iu/a4+AwiY4IHSoV2wwjWS2F1fZJGJ" crossorigin="anonymous">
{{-- CKEditor CDN --}}
<script src=""></script>
<div class="container mt-5">

<form action="{{url('save')}}" method="POST">
<div class="row">
<div class="col-xl-8 col-lg-8 col-sm-12 col-12 m-auto">

<div class="card shadow">
<div class="card-header">
<h4 class="card-title">Laravel 11 Install CKEditor Example Tutorial -</h4>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control" name="title" placeholder="Enter the Title">
<div class="form-group">
<textarea class="form-control" id="body" placeholder="Enter the Description" name="body"></textarea>
<div class="card-footer">
<button type="submit" class="btn btn-success">Save</button>

<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Bootstrap 5 JS dependencies -->
<script src="[email protected]/dist/umd/popper.min.js" integrity="sha384-ywbePyNki4ZO2Q7Hd9Gz49j3owK0zhjPusF0nYKxHrbtXzHxZnx9epvvbWNY7/GD" crossorigin="anonymous"></script>
<script src="[email protected]/dist/js/bootstrap.min.js" integrity="sha384-SL6bcz2+xTpCYcB+Zz9NJ7rt/Z3yXJTEUq4+tnY8lLQgsi1X7/WA/Q8AozKkNj6Z" crossorigin="anonymous"></script>

Step 3: Integrate CKEditor in Form

To integrate and use CKEditor into your Blade view, you can include the CKEditor script directly in your HTML file. Here’s how you can do it:

.catch(error => {

Step 4: Create a Controller File

Create a controller file and methods in it to render views by using the following command:

cd blog
php artisan make:controller CKEditorController

Edit CKEditorController.php file from app/http/controllers folder and add the following method in it:

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

class CKEditorController extends Controller

public function index() {

return view("cke-form");


Step 5: Define Routes

Define route in web.php file to handle view rendering requests in it; something like this:

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

Route::get("ck-form", [CKEditorController::class, "index"]);

Step 6: Test

Run artisan serve command to start application for testing:

php artisan serve

Open browser with to test application:


You learned how to make a text editor in laravel 11 forms using CKEditor 5.

Recommended Guides


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *