编程

[Laravel 扩展包]Laravel 富文本编辑器

30 2025-02-21 19:31:00

Rich Text Laravel 是由 Tony Messias 创建的一个包,它将 Trix 编辑器集成到 Laravel 应用中。如果你正在创建任何类型的 UI,要求用户通过需要格式化的文本框字段键入长篇文本输入,那么很可能需要提供富文本编辑器功能。

通 过Composer 安装 Rich Text Laravel 包:

composer require tonysm/rich-text-laravel

然后,运行 install 命令:

php artisan richtext:install

使用 HasRichText trait 更新模型并添加 $richTextAttributes 属性:

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',
    ];
 ...
}

如果你有任何表单请求类或验证规则,你也需要更新它们。例如:

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

最后,你可以使用 x-trix-input blade 组件来渲染编辑器:

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

与大多数富文本编辑器一样,你可以自定义编辑器中显示的按钮,为此,你可以修改 x-trix-input 组件。

此外,由于你正在渲染用户生成的 HTML,因此必须对用户输入进行消毒,以避免任何安全问题。开发人员建议使用 Symfony 的 HTML Sanitizer。 
如果你正在寻找一个富文本编辑器来添加到你的应用中,试试这个软件包。你可以在 GitHub 上了解更多信息并查看源代码