javascriptlaravel-livewirefckeditor

Why ckeditor lose focus on any char entered in Laravel 8 / livewire 2 app?


In Laravel 8 / livewire 2 app I added ckeditor and it works, with livewire data updating with jkavascript, but problem is that when I enter 1 char in ckeditor area, it lose focus next next entered symbolsa are lost. I do :

            <div wire:ignore class="p-2 w-full">

                <textarea
                    wire:model.lazy="form.content"
                    class="form-control"
                    id="content_textarea"></textarea>
                <x-jet-input-error for="form.content" class="mt-2"/>
            </div>

...

                ClassicEditor
                    .create( document.querySelector( '#content_textarea' ), {
                        extraPlugins: [ SimpleUploadAdapterPlugin ],
                        // ...
                    } )

                    .then(editor => {
                        editor.model.document.on('change:data', () => {
                             console.log('change:data editor.getData()::')
                             console.log(editor.getData())
                        @this.set('form.content', editor.getData() )
                        })
                    })

                    .catch( error => {
                        console.error( error );
                    } );

I use lazy for all inputs on this form and they work ok - in browsers console I see fetching messages only when user leaves the input. In change:data event above I see that event is triggered and I supposed this break lazy mode, but I do not know how that can be fixed?

Thanks!


Solution

  • I found decision with using change:isFocused event :

    CKEditorInit: function () {
        ClassicEditor
            .create( document.querySelector( '#content_textarea' ), {
                extraPlugins: [ SimpleUploadAdapterPlugin ],
            } )
    
            .then(editor => {
                editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
                    if ( !isFocused ) {
                        const doc = document.getElementById('news_admin_page_container');
                        var wireIds = window.livewire.find(doc.getAttribute("wire:id"))
                        wireIds.set('form.content', editor.getData())
                    }
                } );  // 'change:isFocused'