时间戳

首页 > 解决方案 > 如何在 Laravel 6 中使用 CKEditor 5？

ckeditor - 如何在 Laravel 6 中使用 CKEditor 5？

问题描述

我可以使用 CKEditor 4，但我根本不能使用 CKEditor 5。我尝试通过从 CDN 下载/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

但这也没有用。

标签： ckeditorckeditor5laravel-6

解决方案

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 替换为您正在使用的任何类型的编辑器。

有关更多信息，请查看此 CKEditor 页面

推荐阅读