LLInH9rA's Blog

В данной статье я расскажу как добавить поле с WYSIWYG редактором CKEditor 4 в Laravel Orchid.
В первую очередь нужно установить сам CKEditor. Для этого в консоли выполняем:

npm install ckeditor4

После создаем файл resources\js\controllers\ckeditor_controller.js со следующим содержимым:

export default class extends window.Controller {
    connect() {
        CKEDITOR.replace('ckeditor', {
            height: '500px'
        });
    }
}

Файл resources\js\dashboard.js с содержимым:

import Ckeditor_controller from './controllers/ckeditor_controller';

application.register("ckeditor", Ckeditor_controller);

В файл webpack.mix.js добавляем:

mix.copyDirectory('./node_modules/ckeditor4/', 'public/js/ckeditor4');
mix.js('resources/js/dashboard.js', 'public/js');

Собираем все:

npm run dev

Регистрируем наши ресурсы в app\Providers\AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Orchid\Platform\Dashboard;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot(Dashboard $dashboard)
    {
        $dashboard->registerResource('scripts', '/js/ckeditor4/ckeditor.js');
        $dashboard->registerResource('scripts', '/js/dashboard.js');
    }
}

Создаем класс нашего кастомного поля app\Orchid\Fields\CKEditor.php

<?php

namespace App\Orchid\Fields;

use Orchid\Screen\Field;

class CKEditor extends Field
{
    /**
     * Blade template
     *
     * @var string
     */
    protected $view = 'fields.ckeditor';

    /**
     * Default attributes value.
     *
     * @var array
     */
    protected $attributes = [];

    /**
     * Attributes available for a particular tag.
     *
     * @var array
     */
    protected $inlineAttributes = [];
}

Создаем файл представления resources\views\fields\ckeditor.blade.php

<div data-controller="ckeditor">
    <div class="form-group">
        <lable class="text-wrap mt-2 form-label">{{ $title }}</lable>
        <textarea name="{{ $name }}" id="ckeditor">{{ $value }}</textarea>
    </div>
</div>

На этом наше поле готово. Переходим в экран и добавляем:

CKEditor::make('news.text')
    ->title('Текст новости')

И получаем результат

Добавление Laravel Filemanager в CKEditor 4

Также можно добавить Laravel Filemanager в наш CKEditor. Для этого устанавливаем его. Подробнее про файловый менеджер можно почитать тут

 composer require unisharp/laravel-filemanager
 php artisan vendor:publish --tag=lfm_config
 php artisan vendor:publish --tag=lfm_public
 php artisan storage:link

Файл resources\js\controllers\ckeditor_controller.js приводим к такому виду:

export default class extends window.Controller {
    connect() {
        CKEDITOR.replace('ckeditor', {
            height: '500px',
            filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
            filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',
            filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
            filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='
        });
    }
}

Билдим еще раз:

npm run dev

И получаем наш результат: