Using Trix text editor

#1

I’m using Trix text editor and when I’m implemented on livewire I have this weird error (nothing in the console or the network tab)

trix fading
trix fading720×548 419 KB

View:

  <div class="mb-4">
      <label class="block text-gray-700 text-sm text-xl font-bold mb-2" for="order">
            Page Content
       </label>
       <input id="body"
              value="Your Page Content Here"
              type="hidden"
              wire:model.debounce.365ms="form.body"
              name="content">
        <trix-editor input="body"></trix-editor>
            @error('form.body')
                <p class="text-red-700 font-semibold mt-2">
                   {{$message}}
                </p>
            @enderror
  </div>

Any Ideas?

Summernote and Livewire
#2

The DOM is swapping out your input on round trip. You’ll need to use some combination of wire:ignore and moving your wire:model.

Try:

<div> <!-- top-most div don't attach livewire-->
    <div class="mb-4" wire:model.debounce.365ms="form.body" wire:ignore>
        <label class="block text-gray-700 text-sm text-xl font-bold mb-2" for="order">
            Page Content
        </label>
        <input id="body" value="Your Page Content Here" type="hidden" name="content">
        <trix-editor input="body"></trix-editor>
        @error('form.body')
        <p class="text-red-700 font-semibold mt-2">
            {{$message}}
        </p>
        @enderror
    </div>
</div>
1 Like
#3

yeah, it’s working now.
thank you @shortbrownman for your help.

#4

It’s in laracasts now :sweat_smile:

laracasts
laracasts719×517 44.6 KB

2 Likes
#5

Appreciate the attribution!

#6

No worries, you Deserve That.