CKEditor 5 allows users to create a text editor on Laravel 11 form by adding their library into it and also allows text or content formatting.
Let’s start creating a text editor on Blade View form to format text content such as font size, color, family and more by integrating ckeditor 5:
Step 1: Create Blade View
Create ckeditor.blade.php file in resources/views/ folder and add textarea input field in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 CKEditor 5 Example Tutorial - itcodstuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Laravel 11 CKEditor 5 Example - itcodstuff.com</h1>
<textarea name="editor" id="editor"></textarea>
</div>
</body>
</html>Step 2: Integrate CKEditor 5 Using CDN
In your resources/views/ckeditor.blade.php file, include CKEditor 5’s CDN link within the head section:
<script src="https://cdn.ckeditor.com/ckeditor5/35.2.0/classic/ckeditor.js"></script>Step 3: Initializing CKEditor 5 on a Textarea Element
Create text editor in your resources/views/ckeditor.blade.php file, include CKEditor 5’s script in it:
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
</script>Step 4: Create a Route
In your routes/web.php file, create a route to access the CKEditor view:
use Illuminate\Support\Facades\Route;
Route::get('/ckeditor', function () {
return view('ckeditor');
});Step 5: Test Your CKEditor Integration
You can now run your Laravel development server by using the following command:
php artisan serveHit http://localhost:8000/ckeditor url in your browser to see the CKEditor 5 instance integrated into your Laravel 11 project using CDN and Bootstrap 5.