Добавление визуального редактора Trix в Laravel 6

02.04.2020 12:37:59

Вот небольшая инструкция по установке и интеграции редактора Trix в Laravel 6

Ссылка на проект: laravel-trix

Установка пакетов и первичная настройка

 
composer require te7a-houdini/laravel-trix
php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"
php artisan migrate

Интеграция

В шаблон нужно добавить:

 
    <head>
        @trixassets
    </head>

- работает даже если jQuery подключен в подвале.

В файле с представление, например, для редактирования поста resources/views/admin/posts/edit.blade.php, находим нужный элемент ввода, к примеру, textarea:

 
<textarea name="text" class="form-control">{{$post->text}}</textarea>

Скрываем это поле (добавив класс d-none), добавляем ему идентификатор ( id="so_text") и вставляем код редактора:

 
<textarea id="so_text" name="text" class="form-control d-none">{{$post->text}}</textarea>
@trix(\App\Post::class, 'content', [ 'id' => 'so_text' ])

Послесловие

В примерах их официально документации, прошлый элемент ввода не скрывается, а полностью заменяется. Но мне этот вариант не подошел, т.к. при этом в request метода update/store приходит массив post_fields с ключом content и нужно отдельно разбираться как его передать валидатору.

Поэтому Post::class и 'content', тут можно заменить на что угодно. Также ненужно добавлять модели примесь use Te7aHoudini\LaravelTrix\Traits\HasTrixRichText;.


Категории: Laravel
Пометки: textarea, editor, визивиг, WYSIWYG
Яндекс.Метрика