te7a-houdini/laravel-trix

由 Rails 的 ActionText 启发,为 Laravel 定制的 trix 编辑器

3.0.0 2024-03-13 15:06 UTC

This package is auto-updated.

Last update: 2024-09-13 16:21:07 UTC


README

Releases Build Status StyleCI Code Quality License Downloads

配置可用的 Basecamp Trix 编辑器,直接集成到您的 Laravel 应用程序中

灵感来源于 Rails Action Text

安装

您可以通过 composer 安装此包

composer require te7a-houdini/laravel-trix

然后发布配置和迁移

php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"

迁移发布后,运行迁移以创建所需表

php artisan migrate

然后在 HTML 的头部标签中添加 @trixassets 指令

<html>
    <head>
        @trixassets
    </head>
</html>

使用

假设我们有一个 Post 模型 并想添加 trix 编辑器。

使用 @trix($model, $field, $config = [])

您可以在任何视图中使用 @trix 指令来渲染 trix 编辑器。

<html>
    <head>
        @trixassets
    </head>

    <body>
        <!-- notice that content field isn't presented in Post model -->
        @trix(\App\Post::class, 'content')
    </body>
</html>

存储富文本字段

现在让我们尝试在点击提交按钮时存储 content 富文本字段。

<html>
    <head>
        @trixassets
    </head>

    <body>
        <form method="POST" action="{{ route('posts.store') }}">
            @csrf
            @trix(\App\Post::class, 'content')
            <input type="submit">
        </form>
    </body>
</html>

首先将 HasTrixRichText 特性添加到您的模型中

namespace App;

use Illuminate\Database\Eloquent\Model;
use Te7aHoudini\LaravelTrix\Traits\HasTrixRichText;

class Post extends Model
{
    use HasTrixRichText;

    protected $guarded = [];
}

然后您可以通过多种方式轻松地存储任何富文本字段

Post::create(request()->all());

//storing must follow this convention (model lowered class name)-trixFields
Post::create([
    'post-trixFields' => request('post-trixFields'),
]);

为现有模型渲染 Trix

有几种方法可以为现有模型渲染 trix

<!-- inside view blade file -->

@trix($post, 'content')

{!! $post->trix('content') !!} //must use HasTrixRichText trait in order for $model->trix() method work

{!! app('laravel-trix')->make($post, 'content') !!}

为现有模型渲染 HTML

您可以为现有模型渲染 HTML 内容

<!-- inside view blade file -->

{!! $post->trixRender('content') !!} //must use HasTrixRichText trait in order for $model->trixRender() method work

存储附件

当上传文件到 trix 编辑器时,会向 laravel-trix 配置文件中的 store_attachment_action 发送 AJAX 请求。它使用 Laravel 存储,然后根据 Basecamp Trix api 返回 action 的 url(如果上传成功)。

上传的文件将存储在 trix_attachments 表中,作为 pending 附件。

一旦模型被保存,所有 pending 附件的 is_pending 列将等于 0

因此,为了使存储附件变得非常简单,请确保在您的模型中使用 HasTrixRichText 特性。

Post::create(request()->all());

//storing must follow this convention (model lowered class name)-trixFields
//and for attachment must follow attachment-(model lowered class name)-trixFields
Post::create([
    'post-trixFields' => request('post-trixFields'),
    'attachment-post-trixFields' => request('attachment-post-trixFields')
]);

更改存储磁盘

您可以从 laravel-trix 配置文件中更改附件存储磁盘。

return [
    'storage_disk' => env('LARAVEL_TRIX_STORAGE_DISK', 'public'),

    'store_attachment_action' => Te7aHoudini\LaravelTrix\Http\Controllers\TrixAttachmentController::class . '@store',

    'destroy_attachment_action' => Te7aHoudini\LaravelTrix\Http\Controllers\TrixAttachmentController::class . '@destroy',
];

或者如果您想为特定的富文本字段更改存储磁盘,您也可以这样做

@trix($post, 'content', ['disk' => 'local'])

删除富文本字段和附件

您可以在删除模型时删除相关的富文本字段和附件

class Post extends Model
{
    use HasTrixRichText;

    protected $guarded = [];

    protected static function boot()
    {
        parent::boot();

        static::deleted(function ($post) {
            $post->trixRichText->each->delete();
            $post->trixAttachments->each->purge();
        });
    }
}

配置表

如果您想隐藏按钮或工具栏,您可以这样做。有关更多配置,请参阅下表。

@trix($post, 'content', [ 'hideButtonIcons' => ['attach', 'bold'] ])

@trix($post, 'content', [ 'hideTools' => ['text-tools'] ])

测试

composer test

更新日志

请参阅 CHANGELOG 了解最近有哪些更改。

安全性

如果您发现任何与安全性相关的问题,请通过电子邮件 ahmedabdelftah95165@gmail.com 而不是使用问题跟踪器。

鸣谢

许可证

MIT 许可证 (MIT)。有关更多信息,请参阅 许可证文件