How to Use WYSIWYG Editors in Laravel: CKEditor, TinyMCE, Trix, Quill - With Image Uploads

There are a lot of textarea so-called WYSIWYG editors on the market. In this article, I took 4 popular ones - CKEditor, TinyMCE, Trix and Quill - and explained how to add them to a Laravel project, also adding a file/image upload feature in each case. Let's look at those examples.

Prepare Tasks CRUD

For demonstration of those text editors, we will prepare a demo project with a form: it will be a basic Tasks CRUD with only title (text) and description (textarea for the upcoming editor) fields.

Also, we're preparing two things for the upcoming file upload with the editors:

• For the file upload, every editor will POST to the route named upload which will use TaskController method upload(). For now, it's empty - we will fill it in for every editor separately.
• For managing images, we will use Spatie Media Library package. To install and prepare model to work with that package, read their documentation.

Ok, now as we prepared our form, let's add the editors, one by one. Each of those editors will have a separate branch in the Github repository, the links will provided below.

CKEditor

First, of course, we need to initialize the CKEditor. According to the docs, we need two steps for that:

1. Load editor
2. Create editor

In both create and edit forms, at the end of the file, before </x-app-layout>, add JS code.

resources/views/tasks/create.blade.php && resources/views/tasks/edit.blade.php:

    // ...
    @push('scripts')
        <script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/classic/ckeditor.js"></script>
        <script>
            ClassicEditor
                .create(document.querySelector('#description'))
                .catch(error => {
                    console.error(error);
                });
        </script>
    @endpush
</x-app-layout>

Now you should see CKEditor in your form.

Now, for file uploading, we will use...