Using Trix text editor with livewire 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)
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?
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>
Solved by: shortbrownman
@oussamasid Are you able to save the text with Bold Italics and all those bells and whistles that come with the Trix coz for me nothing works except it all saves as a plain text. So I see no point of using a wysiwyg editor rather plain textarea tag which works fine! LOL
Let me know if work for you!
Hey, @sunnyboy
Can you provide a code example?
Oh it worked but I switched to Medium Editor instead later! 😊
Thanks!
Please sign in or create an account to participate in this conversation.
