Как правильно подключить ckeditor5 в laravel?

Пользователь

от clifford , в категории: PHP , год назад

Как правильно подключить ckeditor5 в laravel?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от marlen , год назад

@clifford 

Подключение CKEditor 5 в Laravel может быть выполнено следующим образом:


Шаг 1: Установите CKEditor 5 Установите CKEditor 5, используя любой из следующих методов:

  • Скачайте CKEditor 5 с официального сайта и установите его в каталог public/js/ckeditor5 вашего проекта Laravel
  • Используйте пакет npm для установки CKEditor 5, выполнив команду npm install --save @ckeditor/ckeditor5-build-classic. Затем скопируйте содержимое папки node_modules/@ckeditor/ckeditor5-build-classic/build/ в public/js/ckeditor5 вашего проекта Laravel.


Шаг 2: Создайте новый Blade шаблон Создайте новый Blade шаблон, который будет содержать форму с CKEditor 5. Например, вы можете создать файл resources/views/ckeditor.blade.php со следующим содержимым:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@extends('layouts.app')

@section('content')
    <h1>CKEditor 5 Demo</h1>

    <form method="POST" action="{{ route('ckeditor.store') }}">
        @csrf

        <label for="body">Body</label>
        <textarea id="body" name="body">{{ old('body') }}</textarea>

        <button type="submit">Save</button>
    </form>

    <script src="{{ asset('js/ckeditor5/build/ckeditor.js') }}"></script>
    <script>
        ClassicEditor
            .create( document.querySelector( '#body' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
@endsection


Шаг 3: Добавьте маршрут и контроллер Добавьте маршрут и контроллер для обработки отправки формы. Например, вы можете добавить маршрут в файл routes/web.php:

1
Route::post('/ckeditor', 'CkeditorController@store')->name('ckeditor.store');


Затем создайте контроллер CkeditorController с помощью команды php artisan make:controller CkeditorController.


В методе store контроллера вы можете проверить и сохранить входные данные. Например, вы можете использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
public function store(Request $request)
{
    $request->validate([
        'body' => 'required|string',
    ]);

    // сохранить входные данные в базу данных или еще куда-то

    return redirect()->back()->with('success', 'Data has been saved successfully.');
}


Шаг 4: Запустите приложение Запустите ваше приложение Laravel с помощью команды php artisan serve и откройте веб-страницу с CKEditor 5, перейдя по адресу http://localhost:8000/ckeditor.


Это должно работать, если вы установили CKEditor 5 в правильную папку и использовали правильный путь к файлу скрипта CKEditor 5 в шаблоне Blade.