CODEWITHSUNDEEP
phplaravelwebpacklaravel-6ckeditor5
Tim Lewis
Tim Lewis

Reputation: 29306

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?

Upvotes: 3

Views: 5582

Answers (4)

Rifki Ardiansyah
Rifki Ardiansyah

Reputation: 65

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

document.querySelectorAll('[data-init-plugin="ckeditor"]').forEach(function (val) {
    ClassicEditor
        .create(val, {
            toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        })
        .catch(error => {
            console.log(error);
        });
});

Upvotes: 0

aimme
aimme

Reputation: 6818

Previous answers helped me alot. But for me I had to do some extra works to make it work. So I am sharing it here for the visiting users.

  • My Laravel version did not have jquery loaded so had to load it.
  • I did not want to add ckeditor to my app.js bundle as it will be used in a single page of my website. So wanted to load it for that page only

created new ckeditor.js file in resources/js/ folder with following content

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

added the created file and jquery to webpack.mix.js to compile. If you want you can combine to one file, but it wont be good if you want to use jquery for other purposes.

mix.combine([
    'node_modules/jquery/dist/jquery.js'
    //here you can include more files to combine, or can combine ckeditor file here as well
],'public/js/jquery.js');

mix.js('resources/js/ckeditor.js', 'public/js/ckeditor.js');

loaded the compiled to the page. Assuming that you are using blade template extending main blade file which has a @yield('page-head-scripts') inside head tag. There are other approaches for this step, this is how I did it.

@section('page-head-scripts')
      <script src="{{ asset('js/jquery.js') }}"></script>
      <script src="{{ asset('js/ckeditor.js') }}"></script>
@endsection

Add the editor create code to the page. Assuming that you are using blade template extending main blade file which has a @yield('page-last-scripts') end of the main page. There are other approaches for this step, this is how I did it.

@section('page-last-scripts')
<script type="text/javascript">

$(document).ready(function(){

  //ClassicEditor.create($('#edit_about_text').get()[0]); this or below part.
  //to elobrate I have added more codes
  ClassicEditor.create( document.querySelector( '#editor' ), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
    } )
    .catch( error => {
        console.log( error );
    } );

});

</script>
@endsection

Upvotes: 1

Foued MOUSSI
Foued MOUSSI

Reputation: 4813

Regarding Laravel included libraries examples in boostrap.js file such as pusher, axios, etc...

You may use

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

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

Upvotes: 4

Tim Lewis
Tim Lewis

Reputation: 29306

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.

Upvotes: 2

Related Questions