Livewire v3 and Trix v2 loading content properly Has anyone got Livewire v3 and Trix v2 to work correctly? Doing the following
<div>
<input id="x" wire.model="editing.description" type="hidden">
<trix-editor input="x"></trix-editor>
</div>
And it won't properly load the data into the editor on load.
Am I missing something?
@vincent15000 that is a mistake on my part when writing out the code, I should have copied and pasted my code. But you're correct, the editor should have the input set to the same id as the input. I've updated my example code.
So to reiterate my example still does not load the data correctly into the editor on load.
Anyone else having this issue?
Do you pass the data in mount()?
public $summary;
public function mount(): void
{
$this->summary = ' Lorem ipsum is a placeholder text commonly..';
}
<div class="mb-6" wire:ignore>
<input id="summary" type="hidden" placeholder="Summary.." value="{{ $this->summary }}" wire:model="summary">
<trix-editor input="summary" class="trix-content"></trix-editor>
@error('summary')
<p class="mt-2 text-xs text-red-600">{{ $message }}</p>
@enderror
@script
<script>
let trixEditor = document.getElementById("summary")
addEventListener("trix-blur", function (event) {
@this.
set('summary', trixEditor.getAttribute('value'))
})
</script>
@endscript
</div>
My example works as I've tried just now, please take my example and update it in your code as you need it and try it out.
Please sign in or create an account to participate in this conversation.