Trix Text Editor Reusable Component with AlpineJS (Updated)

trix_text_editor_component

use it in any livewire component
Replace LiveWireProperty with your desire value

<x-text-editor wire:model="LiveWireProperty"></x-text-editor>

I’m using .defer in AlpineJs to Update livewire property only on post and not with every single keystroke

Create a laravel Anonymous Components, in my case I named it text-editor, you can use any name you want it.

Component Code

<div x-data="{textEditor:@entangle($attributes->wire('model')).defer}"
     x-init="()=>{var element = document.querySelector('trix-editor');
                element.editor.insertHTML(textEditor);}"
     wire:ignore>

<input x-ref="editor"
       id="editor-x"
       type="hidden"
       name="content">

<trix-editor  input="editor-x"
             x-on:trix-change="textEditor=$refs.editor.value;"
></trix-editor>
</div>

@push('scripts_head')  //add your script base on your path or url
    <script type="text/javascript" src="/js/trix.js"></script>
@endpush

@push('css')  //add your script base on your path or url
    <link rel="stylesheet" type="text/css" href="/css/trix.css">
@endpush

Any question let me know