CK Editor Laravel Livewire

Question

Is there anyway for Laravel Livewire to make my CKEditor the same behavior as a wire:model.lazy? currently I have a script tag that listens for any changes. Which causes for every type a request towards the component..

<script>
  ClassicEditor
    .create(document.querySelector('#body'))
    .then(editor => {
      editor.model.document.on('change:data', () => {
        @this.set('body', editor.getData());
      })
    })
    .catch(error => {
      console.error(error);
    });

</script>

The behavior I want is either a button or everytime I lose focus on the CKEditor the $body will be updated.

Answer 1

just listen to the submit button and update the value on click

    let editor;

    ClassicEditor.create(document.getElementById('post'), {
    // configs
    })
    .then(newEditor => {
         editor = newEditor;
     })
     .catch(error => {});    
    
    document.querySelector('button[type="submit"]').addEventListener('click', function () {
      @this.set('post', editor.getData());
  });

Answer 2

For me and anybody else who have the same issue

The main issue here is on.change this piece of code on( 'change:data'... will make the editor send post request on every single key press.

Solving the issue.

<script>
        let body_changed = false;
        ClassicEditor
            .create(document.getElementById('body'), {})
            .then(editor => {
                window.body = editor;
                detectTextChanges(editor);
                detectFocusOut(editor);
            })

        function detectFocusOut(editor) {
            editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
                if (!isFocused && body_changed) {
                    body_changed = false;
                    @this.set('body', editor.getData());
                }
            })
        }

        function detectTextChanges(editor) {
            editor.model.document.on('change:data', () => {
                body_changed = true;
            });
        }
    </script> 

Hope this will help me and others in future:)