Zum Inhalt springen

Projektanfrage

Sprechen wir ganz unverbindlich über Ihr Projekt.

Oder nutzen Sie unser Kontaktformular
Vielen Dank für Ihre Nachricht. Wir werden uns in Kürze bei Ihnen melden.
Livewire
Laravel

TinyMCE als Livewire Componentw

TinyMce in a Livewire Component.

Laravel Livewire ist eine massive Arbeitserleichterung zur entwicklung dynamischer Webapps. Aber es hat seine Tücken. Wenn man es mit externen JavaScript-Bibliotheken wie TinyMCE kombinieren möchte, kann man auf unerwartete Probleme stoßen.

Das Problem
Laravel Livewire aktualisiert bei jedem Update das DOM-Element. Das bedeutet, dass, wenn man TinyMCE in einem Livewire-Component verwendet, die TinyMCE-Instanz bei jedem Livewire-Update zerstört und neu initialisiert wird. Das macht die flüssige Nutzung des Editors unmöglich.

Die Lösung
Glücklicherweise gibt es Wege, dieses Problem zu umgehen. Wir können wire:ignore verwenden, um zu verhindern, dass Livewire bestimmte DOM-Elemente verändert. Mittels Events steuern wir den Inhalt von TinyMCE um ihn zu speichern oder zu aktualisieren.

Es gibt eine gute Möglichkeit, dieses Problem zu lösen. Mit wire:ignore (Dokumentation zu wire:ignore) können wir Livewire daran zu hindern, bestimmte DOM-Elemente zu verändern. Mit Events steuern wir den Inhalt von TinyMCE, um ihn zu speichern oder zu aktualisieren.

Blade-Template mit JavaScript (Einbindung von TinyMCE und benutzerdefinierten Events)