How to use CKEditor 5 in Laravel 6?

Question

I can use CKEditor 4, but I can't use CKEditor 5 at all. I try to use by downloading from /node_modules or I use the CDN. I've tried to use it the same way I use CKEditor 4 but it doesn't work.

<script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
<script>
    CKEDITOR.replace('classic-ckeditor5')
</script>

I try to load it in my create.blade.php.

@extends('layouts.app')

@section('content')
    <h1>Create Post</h1>
    {!! Form::open(['action' => 'PostsController@store', 'method' => 'POST']) !!}
    <div class="form-group">
        {{ Form::label('title', 'Title') }}
        {{ Form::text('title', '', ['class' => 'form-control', 'placeholder' => 'Title']) }}
    </div>
    <div class="form-group">
        {{ Form::label('body', 'Body')}}
        {{ Form::textarea('body', '', ['id' => 'classic-ckeditor5', 
        'class' => 'form-control', 'placeholder' => 'Body Text']) }}
    </div>
    {{ Form::submit('Submit', ['class' => 'btn btn-primary']) }}
    <!-- when submit button clicked the data will get send to store in PostsController -->
    {!! Form::close() !!}
@endsection

But that didn't work either.

Answer 1

CKEditor 5 has changed their way of instantiating the plugin.

Earlier (CKEditor <= 4.*), it was:

CKEditor.replace('<name of the textarea box>')

Now in CKeditor >= 5.*, it is:

ClassicEditor
    .create(document.querySelector(<id of the textarea field>))
    .catch(error => {
        console.error(error);
    });

You can replace ClassicEditor with whatever type of editor you are using.

For more information, please check this CKEditor page