如何在Laravel 6中使用CKEditor 5?

时间:2019-09-23 04:19:10

标签: ckeditor ckeditor5 laravel-6

我可以使用CKEditor 4,但根本不能使用CKEditor 5。我尝试通过从/node_modules下载来使用,或者使用CDN。我尝试使用与CKEditor 4相同的方式来使用它,但是它不起作用。

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

我尝试将其加载到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

但是那也不起作用。

1 个答案:

答案 0 :(得分:3)

CKEditor 5更改了实例化插件的方式。

更早的版本(CKEditor <= 4. *),是:

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

现在在CKeditor中> = 5. *,它是:

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

您可以使用任何类型的编辑器替换ClassicEditor。

有关更多信息,请检查this CKEditor page