Problems with WYSIWYG

#1

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.

#2

where you import tinymce ?

1 Like
#3

wire:ignore will stop the rerendering.

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

1 Like
#4

Aha that has sorted it.

Thanks a lot for your help.

#5

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

I little snippet would be great :slight_smile:

#6

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

#7

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.

#8

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.

#9

can you write the complete code bro @sineld ? thanks

#10

Import CKEDITOR:
scr ipt src="{{ asset(‘assets/js/ckeditor/ckeditor.js’) }}"

Connect it to your textarea:

CKEDITOR.replace(’#textarea’).on(‘change’, function(e){
@this.set(’{{ $myTextArea }}’, e.editor.getData());
});

That’s it.

@this.set('{{ $myTextArea }}', e.editor.getData());

Does all the magic.

1 Like
#11

thanks bro @sineld, but im still get the error when type on CKEDITOR, like in screenshot

<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace('content').on('change', function(e){
        @this.set('{{ $content }}', e.editor.getData());
    });
</script>

Screen Shot 2020-05-29 at 16.44.51
Screen Shot 2020-05-29 at 16.44.512784×1678 858 KB

1 Like
#12

Try using:
@this.set('content', e.editor.getData());

2 Likes
#13

Hello!! I have the same problem and I can’t solve it, could you please help me? I pass the code that I have so far

<script src="https://cdn.ckeditor.com/ckeditor5/25.0.0/classic/ckeditor.js"></script>

<script>
            CKEDITOR.replace('#extract').on('change', function(e){
                this.set('extract', e.editor.getData());
            });

            CKEDITOR.replace('#body').on('change', function(e){
                this.set('body', e.editor.getData());
            });

 <textarea class="form-control ckeditor" id="body" name="body"  cols="30" rows="10"
            wire:model.lazy="body"></textarea>

As it is now, the CKEDITOR does not render me, previously I had another configuration that did render it but it disappeared when I clicked on another field, or when I managed to prevent that from happening, livewire did not work and therefore it does not save the record

If I change the js by importing the one that you refer to in the post, the ckeditor is rendered but when clicking on another field it disappears

#14

Use the script at the end page of livewire view, where the textarea is located not in app layout.