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