Rich Text у Laravel

Rich Text Laravel — це пакет, створений Тоні Мессіасом, який інтегрує Trix Editor (від 37 Signals) у ваші Laravel-додатки. Якщо ви розробляєте інтерфейс, що дозволяє користувачам вводити великі обсяги тексту у форматованому вигляді, вам, швидше за все, знадобиться функціонал редактора багатого тексту.

Встановіть пакет Rich Text Laravel за допомогою Composer:

composer require tonysm/rich-text-laravel

Далі виконайте команду інсталяції:

php artisan richtext:install

Оновіть вашу модель, додавши трейт HasRichText та властивість $richTextAttributes:

<?php

namespace App\Models;

use Tonysm\RichTextLaravel\Models\Traits\HasRichText;

class Product extends Model
{
    use HasFactory;
    use HasRichText;

    /**
     * Динамічні атрибути багатого тексту.
     *
     * @var array<int|string, string>
     */
    protected $richTextAttributes = [
        'description',
    ];

    /**
     * Атрибути, що можуть бути масово присвоєні.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'price',
        'type',
        'description',
    ];
 ...
}

Якщо у вас є класи Form Request або правила валідації, їх також потрібно буде оновити. Наприклад:

$this->validate([
        'name' => ['required', 'string', 'max:255'],
        'price' => ['required', 'decimal:10,2'],
        'type' => ['required'],
        'description' => ['nullable', 'string'],
])

На завершення ви можете використати компонент x-trix-input для відображення редактора:

<x-trix-input id="description" name="description" :value="old('description', $product->description?->toTrixHtml())" autocomplete="off" />

Як і в більшості редакторів багатого тексту, ви можете налаштувати, які кнопки з'являються в редакторі, змінивши компонент x-trix-input.

Також, враховуючи, що ви працюєте з HTML, створеним користувачами, важливо очистити введені дані, щоб уникнути проблем з безпекою. Розробник рекомендує використовувати HTML Sanitizer від Symfony.

Якщо ви шукаєте редактор багатого тексту для своїх застосунків, спробуйте цей пакет. Більше інформації та посилання на вихідний код можна знайти на GitHub.