DEV Community

Discussion on: Adding CKEditor 5 to Laravel (The Laravel-Mix Way)

View post
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.