Problems with WYSIWYG

What seems to be the problem:
I currently have a Livewire component which has text input and textarea input using the tinymce editor, but when I type into the text input the tinymce editor is being removed.

I think this is due to Livewire re rendering the elements and therefore the javascript that initialises the tinymce editor is being fired, but I’m not sure how resolve the issue.

Steps to Reproduce:
Create Livewire component with text input and textarea. Attach tinymce editor to textarea.

Are you using the latest version of Livewire:
Yes

Thanks a lot for your help.

where you import tinymce ?

1 Like

wire:ignore will stop the rerendering.

Look at the Ignoring DOM-changes section here: https://laravel-livewire.com/docs/alpine-js

1 Like

Aha that has sorted it.

Thanks a lot for your help.

wire:ignore stops rendering, but how do I get the data and pass it to livewire?

I little snippet would be great :slight_smile:

It really depends on which one you are using. They usually have some sort of data object that is keeping track of the text that you can send when you need, or most of them have an on change type of event they fire that you can use to sync to a livewire property.

The approach also depends on whether you are initializing the editor within or outside of your component. Within you can use livewires @this in the script, or fire an even from outside with livewire.emit

There’s probably some stuff you can do with alpine too that might make it easier. Someone else would have to add on to that, I haven’t used it.

I figured out it:

	var editor = CKEDITOR.replace('body\[{{ $locale }}\]', {
		height: 400
	}).on('change', function(e){
		@this.set('body.{{ $locale }}', e.editor.getData());
	});

Thanks for replies.