Skip to content
Configurable Basecamp Trix Editor (WYSIWYG) delivered to your laravel application
PHP HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Apply fixes from StyleCI Oct 26, 2019
database/migrations
resources/views
src
tests [Master] Fix integration with vue js (#12) Dec 1, 2019
.editorconfig Init Oct 26, 2019
.gitattributes Init Oct 26, 2019
.gitignore Init Oct 26, 2019
.scrutinizer.yml
.styleci.yml
.travis.yml Drop test support for 5.5,5.6,5.7 lowest versions Oct 26, 2019
CHANGELOG.md Init Oct 26, 2019
CONTRIBUTING.md Init Oct 26, 2019
LICENSE.md
README.md [Master] Fix integration with vue js (#12) Dec 1, 2019
composer.json
logo.svg
phpunit.xml.dist

README.md

Releases Build Status StyleCI Code Quality License Downloads

Configurable Basecamp Trix Editor delivered to your laravel application

inspired by Rails Action Text

Installation

You can install the package via composer:

composer require te7a-houdini/laravel-trix

Then 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 migrate

then add @trixassets directive at the head tag of your html

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

Usage

let's assume we have Post model & want to add trix editor.

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

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>

Storing Rich Text Fields

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

Render Trix For Existing Model

there's multiple ways to render trix for already existing model

<!-- inside view blade file -->

@trix($post, 'content')

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

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

Storing Attachment

when 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 HasRichText 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')
]);

Changing Storage Disk

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'])

Configuration Table

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

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please email ahmedabdelftah95165@gmail.com instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

You can’t perform that action at this time.