TinyMCE als Livewire Component
Chris Wolf
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.
Blade-Template mit JavaScript (Einbindung von TinyMCE und benutzerdefinierten Events)