TinyMCE als Livewire Componentw
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)