Latest ckeditor 5 version with image upload integration in laravel web application

You need to add an editor for your client to easily format and edit text whether it's your Laravel custom web application or any other platform. Using an editor can easily make text bold, put links , upload videos, change formatting, even add videos and upload images.Today I am writing a tutorial on how you can easily integrate the latest ckeditor 5 in your Laravel dynamic web page editor.

Intro of Ckeditor 5 latest version

ckeditor is one of the best visual editors that helps easily manage texts on. I have used it since I started my career as a freelance web developer . It's been more than 14 years.

ckeditor 5 is the latest version of ckeditor. It has more advanced features and has a modern UI. Easy media and table management, along with support for advanced features like auto-formatting, mentioning, pasting from Word, and Markdown, are just some of the perks of the editor's well-designed UI and flawless UX.

Types of Ckeditor 5

CKEditor 5 is a flexible and customizable editor that comes in different types or builds, each made for a different use case or device.

Here are the CKEditor 5 types:

• Classic:
This is the most complete version of CKEditor 5, and it has all the tools that a standard rich text editor should have. It works well with web apps and content management systems.
• Inline:
With this build, you can add CKEditor 5 as an inline editor to your web page. This means that the editor is part of the page text and can be changed right there.
• Balloon:
This build has a small, easy-to-use interface that looks like a balloon over the text being edited. It works great for web apps that need an easier and more user-friendly editor.
• Balloon Block:
After making a selection in the document, clicking the button next to the balloon editor's editable area will bring up the balloon block, which is essentially the balloon editor with an additional block toolbar. Additional block-level editing options are available via the toolbar.
• Decoupled document:
Word processor-like rich text editing capabilities are the main focus of the document editor. For optimal results, use it to draught documents that will ultimately be printed or converted to PDF.

Each version of CKEditor 5 has its own features and benefits, so developers and content makers can choose the one that works best for them.

Method of Ckeditor 5 integration in project

• 1. Install CKEditor 5 using npm or Yarn
• 2. Install CKEditor 5 Using custom build download
• 3. Install CKEditor 5 Using CDN

Integrate Ckeditor 5 in Laravel web aplication

Create a file includes/ckeditor5_init.blade.php in your laravel folder

Here loaded cdn of ckeditor 5 and mentioned some predefined toolbar, plugins. I have created a function ckeditor5_init() . It will initialize ckeditor 5 and replace your textarea to rich text editor . I have considered using it in other cases as well, like if you want to enable or disable the ckeditor with a javascript/jquery click event.

• Now include the file in your required page where you need to integrate the ckeditor5 using below. You can also put it in admin master file to load in all admin pages.

• Here I have put the 'ckfinder' plugin to upload images in laravel . If you currently don;t need then can remove it.
• Not just put the class 'ckeditor' in your form's textarea where you need to show ckeditor5. That's it.

Image upload using ckfinder plugin of ckeditor 5 in Laravel

1) Below code should be in your ClassicEditor.create() method to use ckfinder plugin and mention laravel upload route

2) To enable image upload in your ckeditor using the ckfinder plugin.

3) Add function ckeditor_upload() in your Laravel Controller.php file.

4) Function to convert any image to webp in Laravel .

Here I have added an additional function to convert any image to webp . You know google page speed or GTmetrix 's lighthouse recommend to use next generation image format i.e webp in your website to serve images faster and reduce download time. So, I created this function that I use in all of my clients' websites . You can also use it

Note:

In this way I tried to cover all steps for integrating ckeditor 5 latest version in laravel web applications. Hope you find my tutorial simple and easy to understand. If you have any query, You can write in the comments below. I will try to revert soon . If you looking laravel more tutorials then browse of laravel tutorials. I am Pawan Kumar, a freelance web developer ( Full Stack Web developer). I have been developing custom web applications since 2008. If you have any kind of project that you want to outsource then please let me know. I will compete at an affordable cost with the best quality .