How to use Livewire & Trix Editor
Today I’m going to write a very fast recipe to install Trix Editor and use in our Laravel 7.x with laravel-mix.
For this tutorial I’m using Laravel Boilerplate, so, Livewire is already installed and working.
To use with our boilerplate we need to install trix through npm:
npm i trix --only=dev
Open resource/js/backend/app.js and add:
import 'trix/dist/trix'; // importing trix
Now we need to add styles, open resource/js/backend/app.scsss and add:
Now lets compile our assets:
npm run dev
Now we have our libraries to use Trix in our blades, to use in a blade we need to add the tag <trix-editor /> in this way:
<div class="col" wire:model.debounce.365ms="msg" wire:ignore>
<input id="msg" value="Hello LiveWire & Trix" type="hidden" name="content">
Let’s explain a bit
wire:ignore its to avoid livewire updates to the DOM.
wire:model.debounce.365ms is used to bind the input field with our livewire component.
And it’s all, pretty easy… i tried other text editor’s but this was more easy to deploy.