Install and Use CKEditor 5 in Laravel 9
Last updated on June 7, 2023
CKEditor is a text editor that is usually used in content management systems that allows you to add and edit rich text. It supports HTML elements like paragraphs, links and images, etc. It has a user-friendly interface and excellent features. Also, it can be easily integrated with web pages.
CKEditor is also known as WYSIWYG (What You See Is What You Get) editor. WYSIWYG simply means that whatever you write in the editor will be displayed exactly as it appears.
In this article, we will be using CKEditor 5 in Laravel 9. It will also work with other Laravel versions.
One of the good things is it supports both modes (add and update). Usually, we show stored data into input fields for updating the data, so all we need to do is pass data to view from the controller and show it into CKeditor.
Install Laravel 9
Before going into details, let’s get a fresh copy of Laravel 9. In case you already have it then you may skip this step. Run the following command in Visual Studio Code’s terminal or in git bash for installing Laravel 9,
laravel new your-project-nameSometimes, the composer takes time to install Laravel 9, so in this case, wait for it. Once installation is done, follow the below steps. Here is the detailed article that helps you to install the Laravel application on Windows.
Install CKEditor 5 into Laravel 9 Using CDN
In this step, create a blade file where CKEditor would be displayed. So in the views folder add a new file with the name create-article.blade.php. Below is the file location,
your-laravel-project/resources/views/create-article.blade.phpLaravel includes welcome.blade.php file by default, we can copy code from it or use the below HTML in the newly created file.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!--Add CKEditor's CDN here-->
</head>
<body>
<!--Add HTML here-->
<!--Add script element here-->
</body>
</html>In the above HTML, we have comments that explain to us where to add CND, HTML, and script elements that CKEditor provides.
CKEditor provides a CDN for quick or easy installation. It is available here, they listed both versions of CDN on this page. An advantage of using CDN is it helps to speed up the website because they are hosted on servers that load faster. Copy CDN under the heading CKEditor 5, it should look like the below,
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>Then paste it into the head element inside HTML, and make sure it is included before the head tag closes. Now we have completed installations. Next, copy the div element that has the editor id and paste it inside the body element. The div element should look like same as below,
<div id="editor">This is some sample content.</div>In the next step, need to inform CKEditor that the editor should be rendered inside the div element that has the id editor. For that, copy the script element and paste it inside the body element. Usually, we keep the script at the end of HTML. So make sure it is added before the body tag closes. The script is example is below,
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>After completing the above steps, CKeditor will be working well. Also, logs will be displayed in the browser’s console which would be helpful for debugging purposes.
Conclusion
This article demonstrates the brief introduction of CKEditor and its installation steps. Following steps have been covered,
- Laravel 9 installations
- CKEditor 5 installations through CDN
- Steps to add CKEditor in the HTML
Related Posts