Search code examples
phplaravelwebpacklaravel-6ckeditor5

Laravel CKEditor5 - ClassicEditor is not Defined

I'm trying to replace an old version of CKEditor in a Laravel app due to dependency incompatibility with unisharp/laravel-ckeditor and Laravel 6. I've found the CKEditor 5 page with NPM installation instructions, but haven't been able to get it working. Here is my code:

resources/main.js

require('@ckeditor/ckeditor5-build-classic');

$(document).ready(function(){
  ClassicEditor.create($('#edit_about_text').get()[0]);
});

webpack.mix.js

mix.js('resources/assets/js/main.js', 'public/js');

layouts/master.blade.php

<!doctype html>
<html>
  <head></head>
<body>
  <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

jQuery is included (somehow; somewhat unfamiliar with webpack), but running a page that extends @extends('layouts.master') results in the following:

Uncaught ReferenceError: ClassicEditor is not defined

If I remove the require() statement from main.js and simply use the CDN link, everything works as expected:

<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
<script src="{{ asset('js/main.js') }}"></script>

I'm doing something wrong, but I'm at a loss... Has anyone seen this issue before?

Solution

  • Quite a simple solution that the documentation fails to reference, but you need to assign the value of require() to ClassicEditor:

    var ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

    Doing so allows correct reference in code.