Rich Text Laravel

Rich Text Laravel is a package created by Tony Messias that integrates the Trix Editor (from 37 Signals) into your Laravel applications. If you are creating any kind of UI that requires users to type in long form text input via a text area field that needs to be formatted then more than likely you'll need to provide rich text editor functionality.

Install the Rich Text Laravel package via Composer:

composer require tonysm/rich-text-laravel

Next, run the install command:

php artisan richtext:install

Update your model with the HasRichText trait and add $richTextAttributes property:

<?php
 
namespace App\Models;
 
use Tonysm\RichTextLaravel\Models\Traits\HasRichText;
 
class Product extends Model
{
    use HasFactory;
    use HasRichText;
 
    /**
     * The dynamic rich text attributes.
     *
     * @var array<int|string, string>
     */
    protected $richTextAttributes = [
        'description',
    ];
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'price',
        'type',
        'description',
    ];
 ...
}

If you have any Form Request classes or Validation rules you will want to update those as well. For example:

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

And finally you can then use the x-trix-input blade component to render the editor:

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

As with most rich text editors you can customize what buttons appear in the editor and to do this you can modify the x-trix-input component.

Also, since you are rendering user-generated HTML, you must sanitize the user input to avoid any security issues. The developer recommends using Symfony's HTML Sanitizer.

If you are looking for a Rich Text Editor to add to your applications, give this package a try. You can learn more and view the source code on GitHub.