Adding CKEditor 5 to Laravel (The Laravel-Mix Way)

If you building a CMS with Laravel, you may want to implement the WYSIWYG editor for the content. There are some good editor for it, but I want to introduce one of them here. It's CKEditor and it has a rich enough of feature for you. Let's try to implement it in Laravel using Laravel-Mix.

Prerequisites to code along

Have your own laravel app to follow along, you have used JS and SASS/SCSS using laravel-mix in the app.

Installing CKEditor5

Based on the package's page in npmjs, we can install it the following npm command, but we add it to development dependency:

npm install @ckeditor/ckeditor5-build-classic --save-dev

The Component

We just prepare this simple textarea element with wysiwyg class in our page, just to test if it's will work or not later:

<textarea class="wysiwyg"></textarea>

Implementing the CKEditor5

Open your js entrypoint file, we can start to import the ClassicEditor object from the package with the following path and make it parse the wysiwyg element on page load:

...

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';

// ref: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
    ClassicEditor
        .create(document.querySelector('.wysiwyg'))
        .catch(error => {
            console.log(`error`, error)
        });
});

...