TinyMCE as Livewire Component
Laravel Livewire is a big time saver for developing dynamic web apps. But it has its pitfalls. If you want to combine it with external JavaScript libraries like TinyMCE, you might run into problems.
The problem
Laravel Livewire updates the DOM element with every update. This means that if you use TinyMCE in a Livewire component, the TinyMCE instance is destroyed and reinitialised with every Livewire update. This makes the fluent use of the editor impossible.
The solution
There is a good way to fix this. We can use wire:ignore (documentation on wire:ignore) to prevent Livewire from modifying certain DOM elements. Using events, we control the content of TinyMCE to save or update it.
Code Example
Blade template with JavaScript (integration of TinyMCE and custom events):