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">
<head>
<title>Laravel 11 Integrate CKEditor Example - Tutsmake.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5+zHxlq1z8iu/a4+AwiY4IHSoV2wwjWS2F1fZJGJ" crossorigin="anonymous">
{{-- CKEditor CDN --}}
<script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>
</head>
<body>
<div class="container mt-5">
<form action="{{url('save')}}" method="POST">
@csrf
<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 - tutsmak.com</h4>
</div>
<div class="card-body">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="title" placeholder="Enter the Title">
</div>
<div class="form-group">
<label>Body</label>
<textarea class="form-control" id="body" placeholder="Enter the Description" name="body"></textarea>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Bootstrap 5 JS dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-ywbePyNki4ZO2Q7Hd9Gz49j3owK0zhjPusF0nYKxHrbtXzHxZnx9epvvbWNY7/GD" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-SL6bcz2+xTpCYcB+Zz9NJ7rt/Z3yXJTEUq4+tnY8lLQgsi1X7/WA/Q8AozKkNj6Z" crossorigin="anonymous"></script>
</body>
</html>
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:
<script>
ClassicEditor
.create(document.querySelector('#body'))
.catch(error => {
console.error(error);
});
</script>
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:
<?php
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:
<?php
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 http://127.0.0.1:8000/cke-form to test application:
Conclusion
You learned how to make a text editor in laravel 11 forms using CKEditor 5.
