Livewire + AlpineJs: Trix Editor Translations
I managed to setup the Trix Editor (https://github.com/basecamp/trix) with Livewire and Alpine and it is working fine.
But I don't know how I can set the config property of the global Trix object to edit the translations.
In VueJs I could initialize the editor config like so in the created() method:
created() {
Trix.config.lang = {
bold: 'Translated String',
...
}
}
But with Alpine I don't know where this should be located. I tried it in x-init but it did not work. I also tried the trix-initialize and trix-before-initialize event-hooks but couldn't get it to work.
With Js Event Listeners:
xyz.addEventListener("trix-initialize", function(event) {
Trix.config.lang = {
bold: 'Translated String',
...
}
});
or with Alpine as Blade Component:
<div
wire:ignore
x-data
x-on:trix-blur="$dispatch('change', $event.target.value)"
x-init="
Trix.config.lang = {
bold: 'Translated String',
...
}
"
x-on:trix-initialize="
Trix.config.lang = {
bold: 'Translated String',
...
}
"
class="trix-wrapper-content"
{{ $attributes }}
>
<input id="trix" type="hidden">
<trix-editor input="trix" class="trix-content"></trix-editor>
</div>
I am using:
Livewire: v2.3.1 Alpine: v2.7.3 Laravel: v8.12.3 Trix-Editor: v1.3.0
Does anyone know where to set the config values?
Please or to participate in this conversation.