14. Визуальный редактор

Зайдем на сайт https://ckeditor.com/ckeditor-5/online-builder/  . Соберем нужные нам функционал. Выберем язык и скачаем.

Зайдем в https://ckeditor.com/ckfinder/download/ и скачаем ckfinder для php. Либо установим пакет https://packagist.org/packages/ckfinder/ckfinder-laravel-package .

Разархивируем в папку всё в public/assets/admin .

Подключение

Смотрим документацию по подключению https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html , https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_ckeditor5

Подключаем в файле resources/views/admin/layouts/layout.blade.php:

<script src="{{ asset('/assets/admin/ckeditor5/build/ckeditor.js') }}"></script>
<script src="{{ asset('/assets/admin/ckfinder/ckfinder.js') }}"></script>

Там же пропишем код инициализации для полей с id description и content:

<script type="text/javascript">

    ClassicEditor
        .create( document.querySelector( '#content' ), {
            ckfinder: {
                uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
            },
            toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
        } )
        .catch( function( error ) {
            console.error( error );
        } );

</script>
<script type="text/javascript">

    ClassicEditor
        .create( document.querySelector( '#description' ), {
            ckfinder: {
                uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
            },
            toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
        } )
        .catch( function( error ) {
            console.error( error );
        } );

</script>

Настройка редактора

В head вставим код стилей для того, чтобы наши поля были для редактирования ck-editor минимум 300px по высоте:

<style>
    .ck-editor__editable_inline {
        min-height: 300px;
    }
</style>

Для description уберем возможность добавлять картинки и файлы. Для этого из поля toolbar уберем нужные пункты. Инициализация в итоге будет такая:

<script type="text/javascript">

    ClassicEditor
        .create( document.querySelector( '#description' ), {
            ckfinder: {
                uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
            },
            toolbar: ['|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
        } )
        .catch( function( error ) {
            console.error( error );
        } );

</script>

А для поля content добавим весь функционал, который мы собирали вначале. Он записан в тестовом файле public/assets/admin/ckeditor5/sample/index.html . Берем оттуда нужные данные и вставляем в инициализацию. В итоге инициализация получается такая:

<script type="text/javascript">
    ClassicEditor
        .create( document.querySelector( '#content' ), {
            ckfinder: {
                uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
            },
            toolbar: {
                items: [
                    'heading',
                    '|',
                    'bold',
                    'italic',
                    'link',
                    'bulletedList',
                    'numberedList',
                    '|',
                    'outdent',
                    'indent',
                    '|',
                    'imageUpload',
                    'blockQuote',
                    'insertTable',
                    'mediaEmbed',
                    'undo',
                    'redo'
                ]
            },
            language: 'ru',
            image: {
                toolbar: [
                    'imageTextAlternative',
                    'imageStyle:full',
                    'imageStyle:side'
                ]
            },
            table: {
                contentToolbar: [
                    'tableColumn',
                    'tableRow',
                    'mergeTableCells'
                ]
            },
        } )
        .catch( function( error ) {
            console.error( error );
        } );

</script>

Разрешение на загрузку файлов

Сейчас, если мы попытаемся прикрепить файл, то получим ошибку:

Чтобы решить эту проблему, заходим в файл конфигурации public/assets/admin/ckfinder/config.php и включаем настройку для авторизованных пользователей:

$config['authentication'] = function () {
    return true;
};

По хорошему здесь нужно писать проверку авторизации пользователя. Но мы написали просто true, чтобы функция всегда возвращала положительный результат.

Можем пменять настройку $config[‘backends’][‘baseUrl’] (папка для файлов) на:

/ckfinder/userfiles/

authorization

Настроим проверку авторизации пользователя в CKFinder. В файле public/assets/admin/ckfinder/config.php пропишем:

$config['authentication'] = function () {
    require_once  __DIR__ . '/../../../../vendor/autoload.php';
    $app = require_once  __DIR__ . '/../../../../bootstrap/app.php';
    $response = $app->make('Illuminate\Contracts\Http\Kernel')->handle(Illuminate\Http\Request::capture());
    $cookie = $_COOKIE[$app['config']['session']['cookie']] ?? false;
    if ($cookie) {
        $id = $app['encrypter']->decrypt($cookie, false);
        $session = $app['session']->driver();
        $session->setId($id);
        $session->start();
    }

    if (!$app['auth']->check() && !$app['auth']->user()->is_admin){
        header('HTTP/1.0 403 Forbidden'); exit();
    }
    return true;
};

Теперь загружать файлы через CKFinder может только админ.

Выравнивание изображений

В файл resources/views/admin/layouts/layout.blade.php добавим настройки для выравнивания изображения, их мы нашли здесь: https://ckeditor.com/docs/ckeditor5/latest/features/image.html#presentational-styles

image: {
    toolbar: [
        'imageTextAlternative',
        'imageStyle:full',
        'imageStyle:side',
    ],
    // Configure the available styles.
    styles: [
        'alignLeft', 'alignCenter', 'alignRight'
    ],

    // Configure the available image resize options.
    resizeOptions: [
        {
            name: 'resizeImage:original',
            label: 'Original',
            value: null
        },
        {
            name: 'resizeImage:50',
            label: '50%',
            value: '50'
        },
        {
            name: 'resizeImage:75',
            label: '75%',
            value: '75'
        }
    ],

    // You need to configure the image toolbar, too, so it shows the new style
    // buttons as well as the resize buttons.
    toolbar: [
        'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
        '|',
        'resizeImage',
        '|',
        'imageTextAlternative'
    ]
},

Это мы добавили в инициализацию редактора для #content. В стили сайта нужно теперь добавить соответсвующие классы, чтобы выравнивание работало не только в редакторе, а на сайте тоже. Их мы тоже нашли в документации .image-style-align-left, .image-style-align-center and .image-style-align-right.

Добавим в mix файл app.css:

mix.styles([
        'resources/assets/admin/plugins/fontawesome-free/css/all.min.css',
        'resources/assets/admin/plugins/select2/css/select2.css',
        'resources/assets/admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.css',
        'resources/assets/admin/css/adminlte.min.css',
        'resources/css/app.css'
    ],
    'public/assets/admin/admin.css');

В него запишем:

.image-style-align-left {
    float: right;
}
.image-style-align-center{
    text-align: center;
    margin: 0 auto;
}
.image-style-align-right {
    float: left;
}

И выполним:

npm run dev