Skip to content

TinyMCE as Livewire Component

Chris Wolf

Chris Wolf

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.

Blade template with JavaScript (integration of TinyMCE and custom events)

Ready to start?

With us, you have a reliable partner at your side who offers secure, high-quality and plannable software solutions.