DEV Community

Dendi Handian
Dendi Handian

Posted on • Edited on

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

#npm #wysiwyg #laravel #cms

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
        });
});

...
Enter fullscreen mode Exit fullscreen mode

And finally, build the asset using:

npm run development
Enter fullscreen mode Exit fullscreen mode

or

npm run production
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
pathros profile image
Pathros •

Hello. I have followed what you've written so far, but I can't get CKEditor 5 to work from an npm installation.

I get the following error (in the console log of the inspect element):

"Uncaught ReferenceError: ClassicEditor is not defined"

What am I missing? How do I make it work?

Collapse
 
dendihandian profile image
Dendi Handian • • Edited

Well, based on the error, I'm pretty sure you forgot to import the ClassicEditor object or maybe something were changed lately. could I see your app.js file or just the block that imply it?

Collapse
 
pathros profile image
Pathros •

Hello! My app.js looks like:

/** CKEditor 5*/
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';
window.ClassicEditor = ClassicEditor;
Enter fullscreen mode Exit fullscreen mode

I don't know if I have to import it or add an additional setup right at the app.blade.php layout file, so that, it can be used in the rest of the views.

Then, in a view, I try to call it like this:

//...
<textarea
id="editor"
wire:model="content"
class="form-control w-full"
rows="4"
>{{$content}}</textarea>
//...

@push('js')
        <script>
            ClassicEditor
                .create( document.querySelector( '#editor' ) )
                .then(function(editor){
                    editor.model.document.on('change:data',()=>{
                        @this.set('content',editor.getData());
                    })
                })
                .catch( error => {
                    console.error( 'CKEditor error: '+error );
                } );
        </script>
    @endpush
Enter fullscreen mode Exit fullscreen mode

But the CKEditor does not show up and I get the following error in the console log:

Uncaught ReferenceError: ClassicEditor is not defined

Any ideas on how to fix it to make it work?

Thread Thread
 
dendihandian profile image
Dendi Handian • • Edited

I have tried to use that @push directive, but it's not working on my code either. But when I put that ClassicEditor script normally at the end of <body> tag, it works. Maybe you have to make sure the js script execution is in order properly.

Read next

ramunarasinga-11 profile image

Manage your versioning and changelogs using Changesets

Ramu Narasinga -

xuho profile image

Feedback Glow - Canny alternative for indie makers and small teams

Nguyen Xuan hoa -

pavlosisaris profile image

Mastering Code Quality in Laravel: Pint with Git Hooks and Docker

Paul Isaris -

izushi profile image

Clear illustration of how API Token Authentication works

Daichi Izushi -