Cookie Settings

This site uses cookies that need consent. Learn more

Skip to content
Livewire
Laravel

TinyMCE as Livewire Component

TinyMce in a 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):