Trix

There are two versions of the Trix field, with and without attachments.

Trix without file uploads

Requirements

Requires you to have @stack('styles') in head, and @stack('scripts') after Livewire and Alpine script tags

Extends BaseField

Additional methods

->includeExternalScripts()

• Push external (cdn-links) for required scripts and styles to the layout
• Omit, if you import the scripts manually
• Only pushed once, even if you add multiple Trix fields to the same form.

->default($value)

Use this method to set the initial trix input value. Use $this->model to access existing model values.

Example without file uploads

Trix::make('Trix')
    ->default('The initial value of the trix input') // Example: $this->model->foo
    ->includeExternalScripts() //will only be included once if multiple Trix fields.
    ->rules('nullable|string')

Tip

Add the ->custom() option if you need to format the trix-input (html) before saving to database. Read more about custom data ->

---

Trix with file upload - sponsors only

Please 💗 sponsor this package 🔗 in order to get access to this field. The documentation for this version of the Trix field, is available in the sponsor repository.

Blade component

Both versions of the Trix fields shares the same markup

<x-tall-trix
    :field="$field"
    :value="data_get($this, $field->key)"
/>

Styling

Both versions of the Trix fields shares the same Blade component class, extend it, or override in config file.

Tanthammar\TallForms\Components\Trix::class

Theme

 /* Trix input body */
    trix-editor > ul > li, .trix > ul > li {
        @apply list-disc list-outside ml-4;
    }

    trix-editor > h1, .trix > h1 {
        @apply text-2xl font-bold;
    }

    trix-editor > blockquote, .trix > blockquote {
        @apply ml-4 p-4 my-4 bg-gray-200 border-l-4 text-lg;
    }

    trix-editor > ol > li, .trix > ol > li {
        @apply list-decimal list-outside ml-4;
    }