Integrating CKEditor 5 in Laravel

CKEditor is a popular, open-source rich text editor. It allows users to create and format content directly in their web browsers with a user-friendly interface.

CKEditor provides a wide range of features including

Text Formatting

Bold, italic, underline styles with color.

Lists and Tables

Create ordered lists and tables for data.

Media Embedding

Insert & manage images, audio, and videos.

Link Management

Add and edit hyperlinks for seamless access.

Customizable Toolbar

Adjust tools and features for user needs.

Plugins

Enhance features with additional plugins easily.

It’s commonly used in content management systems, blogs, and any application where users need to input and format text.

Step-1: Install Laravel and Set Up a New Project:

If you haven’t yet, set up a new Laravel project:

composer create-project --prefer-dist laravel/laravel your-project-name

Navigate to the project directory:

cd your-project-name

Step-2: Define Routes

In this step, we will define routes for posts. This route will handle user requests and deliver it to a specific controller and its method. In Laravel, All web routes must be added to a particular file routes/web.php.

Open the web routes file and update it accordingly:

Step-3: Setting Up the Controller

Creating the Controller

Run the following Artisan command to create a new controller:

php artisan make:controller BroadcastController

Controller Code

Here is the complete code for the BroadcastController, followed by an explanation of its components:

Step-4: Creating the Blade Template

Create file ckeditor.blade.php in resources/views/component. If the directory doesn't exist, create it first.

Here's the Blade code:

Below is a explanation of the provided code:

CDN Script Links

• Purpose: This line includes jQuery, a popular JavaScript library, version 3.6.0.

• Integrity: This attribute ensures the integrity of the file by comparing its hash against the provided value. This helps to verify that the file has not been tampered with.

• Crossorigin: This attribute handles cross-origin requests and specifies that no credentials (like cookies) are included with the request.

ckeditor.js cdn: This script includes CKEditor 5, Classic build (version 34.0.0), which is a modern rich text editor. This build provides a full-featured What-You-See-Is-What-You-Get (WYSIWYG) editor for content creation.

CKEditor Configuration Script

ClassicEditor.create(...): This function initializes the CKEditor 5 Classic build and attaches it to the HTML element specified by the selector.

document.querySelector('.ckeditor'): This selects the HTML element with the class ckeditor. In this case, it is the (textarea) element where CKEditor will be applied.

uploadUrl: This configuration option specifies the URL where images or files should be uploaded. In this script, it uses Laravel's route helper to generate the URL for the upload endpoint and includes a CSRF token for security.

route('ckeditor.upload'): This generates a URL for the route named ckeditor.upload, which should be defined in your Laravel routes.

Using the above code, you will get the following view, as shown in the picture:

After modifying the content, it will appear as shown below:

Conclusion

CKEditor 5 is a versatile and powerful rich text editor that enhances user experience by providing a modern, intuitive interface for content creation and editing. Its extensive feature set, combined with ease of integration and support for real-time collaboration, makes it an excellent choice for applications that require robust text editing capabilities. Whether you are building a blog, a content management system, or any application requiring rich text input, CKEditor 5 can significantly improve the content creation process and user engagement.

1. User-Friendly Interface:

• Intuitive Design: Its user-friendly design makes it accessible for non-technical users, enabling them to create and edit content without needing to write HTML.

• Easy Integration: CKEditor 5 can be easily integrated into various web applications and content management systems.

2. Rich Text Formatting:

• Comprehensive Toolset: It includes a wide range of formatting options such as bold, italic, headings, lists, links, and block quotes.

• Customizable Toolbar: You can customize the toolbar to include only the tools that are relevant to your application, streamlining the editing experience.

3. Modern JavaScript Framework:

• Modular Architecture: CKEditor 5 is built using modern JavaScript frameworks, which allows for a more modular and extensible architecture.

• Plugin Support: It supports various plugins for additional functionalities like image uploads, tables, and collaboration features, making it adaptable to different use cases.

Integrating CKEditor 5 in Laravel: A Comprehensive Guide