TinyMCE as Livewire Component

Laravel Livewire is a massive labour-saver for developing dynamic web apps. But it has its pitfalls. If you want to combine it with external JavaScript libraries like TinyMCE, you can run into unexpected 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:
Unfortunately, there are ways around this problem. We can use wire:ignore to prevent Livewire from modifying certain DOM elements. Using events, we control the content of TinyMCE to save or update it.