Configurable Basecamp Trix Editor delivered to your laravel application
inspired by Rails Action Text
You can install the package via composer:
composer require te7a-houdini/laravel-trixThen publish the configurations and migrations:
php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"After the migration has been published then run the migrations to create required tables:
php artisan migratethen add @trixassets directive at the head tag of your html
<html>
<head>
@trixassets
</head>
</html>let's assume we have Post model & want to add trix editor.
you can use @trix directive inside any view to render trix editor.
<html>
<head>
@trixassets
</head>
<body>
<!-- notice that content field isn't presented in Post model -->
@trix(\App\Post::class, 'content')
</body>
</html>now lets try to store content rich text field when hitting submit button.
<html>
<head>
@trixassets
</head>
<body>
<form method="POST" action="{{ route('posts.store') }}">
@csrf
@trix(\App\Post::class, 'content')
<input type="submit">
</form>
</body>
</html>first add HasTrixRichText trait to your model
namespace App;
use Illuminate\Database\Eloquent\Model;
use Te7aHoudini\LaravelTrix\Traits\HasTrixRichText;
class Post extends Model
{
use HasTrixRichText;
protected $guarded = [];
}then you can easily store any rich text fields by multiple ways:
Post::create(request()->all());
//storing must follow this convention (model lowered class name)-trixFields
Post::create([
'post-trixFields' => request('post-trixFields'),
]);there's multiple ways to render trix for already existing model
<!-- 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') !!}You can render the html content for already existing model
<!-- inside view blade file -->
{!! $post->trixRender('content') !!} //must use HasTrixRichText trait in order for $model->trixRender() method workwhen uploading a file to trix editor. an ajax request is sent to store_attachment_action in laravel-trix config file. which uses Laravel Storage and then this action returns url if upload is success according to Basecamp Trix api .
the uploaded file will be stored in trix_attachments table as pending attachment.
once model is saved . all pending attachments will have is_pending column = 0
so in order to make storing attachment very easy make sure to use HasTrixRichText trait in your model.
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')
]);you can change attachment storage disk from laravel-trix config file .
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',
];or if you want to change the storage disk for specific rich text field you can do that
@trix($post, 'content', ['disk' => 'local'])you can remove related rich text fields and attachments on a model deleting:
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();
});
}
}if you want to hide buttons or toolbar you can do this. for more configuration refer to the table below.
@trix($post, 'content', [ 'hideButtonIcons' => ['attach', 'bold'] ])
@trix($post, 'content', [ 'hideTools' => ['text-tools'] ])| configuration | type | values | description |
|---|---|---|---|
| hideToolbar | Boolean | True or False | hides the the toolbar |
| hideTools | Array | ['text-tools', 'block-tools', 'file-tools', 'history-tools'] | hides group of buttons |
| hideButtonIcons | Array | ['attach', 'bold', 'italic', 'strike', 'link', 'heading-1', 'quote', 'code', 'bullet-list', 'number-list', 'decrease-nesting-level', 'increase-nesting-level'] | hides a single button |
| disk | String | 'local' or 's3' or 'any-disk' | sets the attachment storage per field |
| id | String | 'any-value-you-want' | the id of input which renders trix. check this link . current id follows this convention (model lowered class name)-field-modelId like post-content-1 or post-content-new-model |
| containerElement | String | valid html tag like span or div |
default container tag is set to span you can change it as you want |
composer testPlease see CHANGELOG for more information what has changed recently.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.