Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jbolecke's avatar

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?

0 likes
0 replies

Please or to participate in this conversation.