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)
});
});
...
And finally, build the asset using:
npm run development
or
npm run production
Top comments (4)
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?
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 yourapp.js
file or just the block that imply it?Hello! My
app.js
looks like: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:
But the CKEditor does not show up and I get the following error in the console log:
Any ideas on how to fix it to make it work?
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.