How To Install And Use CKEditor In Laravel

Do you want to install CKEditor in Laravel? CKEditor is a web text editor which allows us to write rich text formats. In this article, we show you how to install and use CKEditor in Laravel.

Why Need To Use CKEditor?

HTML provides a textarea element for writing description. But, textarea comes with some limitations. In textarea, it’s not easy and user-friendly to write other HTML elements like p, div, img, etc.

To overcome such limitations, we can use CKEditor which itself is a web text editor.

Laravel CKEditor

The purpose of this article is to show how to use and install and CKEditor in Laravel. So we discuss only Laravel package for CKEditor.

If you wish to use CKEdiotr apart from Laravel, then please check the official website for CKEditor.

Install CKEditor In Laravel

To install CKEditor in Laravel, open the command prompt in your project root directory and run the below command.

composer require unisharp/laravel-ckeditor

Above command will install CKEditor packages in your project.

Next, open your config/app.php and place the below line to the providers array.

Unisharp\Ckeditor\ServiceProvider::class,

After the above steps, run the below command which copies some of the files and folders from ‘vendor\unisharp\laravel-ckeditor’ to ‘public\vendor\unisharp\laravel-ckeditor’.

php artisan vendor:publish --tag=ckeditor

How To Use CKEditor

At this stage, we have completed with the steps for installing the CKEditor package. Now let’s see how to use the CKEditor.

For instance, we have a textarea which should get replaced by CKEditor. We are adding id ‘summary-ckeditor’ to the textarea below.

<textarea class="form-control" id="summary-ckeditor"></textarea>

Next, we need to include ‘ckeditor.js’ file and write a JavaScript code which replaces textarea with CKEditor.

<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
<script>
    CKEDITOR.replace( 'summary-ckeditor' );
</script>

That’s it! Above JavaScript code replaces textarea with the CKEditor.

We hope you understand how to install and use CKEditor in Laravel. For any questions or suggestions please leave a comment below.

If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *