How To Install And Use CKEditor In Laravel?

Today’s tutorial, we will show you how to use CKeditor in Laravel. CKEditor is a WYSIWYG HTML editor which allows us to write rich text formats.

We can have HTML elements in the textarea, but it doesn’t have formatting options. Updating this HTML in textarea needs expertise in HTML/CSS. That’s why we have CKeditor, which is a rich text editor, and it will work like Microsoft Word.

How to install CKeditor in Laravel?

composer require unisharp/laravel-ckeditor

Next, we need to add the service provider in order to call from controller/view.

Edit config/app.php, add the following file to Application Service Providers section.

Unisharp\Ckeditor\ServiceProvider::class,

Once you finished with the above steps, run the below command to publish the assets, which will copy from vendor\unisharp\laravel-ckeditorto public\vendor\unisharp\laravel-ckeditor

php artisan vendor:publish --tag=ckeditor

How to use CKeditor in web form?

So far we have finished the setup/installation of CKeditor. Now we can check how to use this in real form.

In body tag, add the textarea form element, which will have the ckeditor input.

<textarea name="editor" id="editor"></textarea>

Next, we can insert the Javascript for the CKeditor, use the below code before closing the body tag.

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

This JavaScript replaces the conventional textarea to ckeditor enabled textarea.

How to upload real image in CKEDITOR?

We have a great tutorial for that, please click here