Trix Text Editor Reusable Component with AlpineJS (Updated)

#1

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

Use editor Trix with Livewire
#2

Thank you for posting this. It works great. However what would be a way to be able to use multiple editors per page. I see that is looking for querySelector , would it make more sense to look for the ID this way you can have multiple IDs?

#3

Hi everyone i made the component more dynamic to have more than one in a page

New Version have dynamic Id and support custom height, i added some custom CSS you can remove it.

<x-text-editor :editorheight="'25rem'" class="w-full" wire:model="configuration.company_privacy_policy"></x-text-editor>

Component Code

@props(['id'=>Str::random(5),'editorheight'=>null])
<div x-data="{textEditor:@entangle($attributes->wire('model')).defer}"
     x-init="()=>{setEditor{{$id}}Value(textEditor)}"
     @reseteditor{{$id}}.window="setEditorValue('');"
     wire:ignore>
<input x-ref="editor{{$id}}"
       id="editor-x{{$id}}"
       type="hidden"
       name="content">
<trix-editor id="editor{{$id}}"  input="editor-x{{$id}}"
             x-on:trix-change="textEditor=$refs.editor{{$id}}.value;"
></trix-editor>
</div>

@once
@push('scripts_head')
    <script type="text/javascript" src="/js/trix.js"></script>
@endpush
@endonce

@push('scripts')
    <script>
        function setEditor{{$id}}Value(value) {
            let element{{$id}}= document.getElementById("editor{{$id}}");
            let input = document.getElementById("editor-x{{$id}}");
            if(value=='') {
                input.value = "";
                element.innerHTML = "";
            }
            else {
                element{{$id}}.editor.insertHTML(value);
            }
        }
    </script>
@endpush

@push('css')
    <link rel="stylesheet" type="text/css" href="/css/trix.css">
    <style>
     .trix-button-group--file-tools{
         display: none!important;
     }
     .trix-button--icon-decrease-nesting-level{
         display: none;
     }
     .trix-button--icon-increase-nesting-level{
         display: none;
     }
     #editor{{$id}}
     {
         height: {{$editorheight ?? '10rem'}};
     }
    </style>
@endpush
1 Like
#4

Hi, look for the new versión i updated the code, you can have multiple components now, in the same page

1 Like