CK Editor Laravel Livewire

Question

Laravel Livewire 是否有讓我的 CKEditor 與電線相同的行為：model.lazy？ 目前我有一個腳本標簽來監聽任何變化。 這導致每種類型都向組件發出請求..

<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>

我想要的行為是一個按鈕，或者每次我失去對 CKEditor 的關注時，$body 都會更新。

Answer 1

只需收聽提交按鈕並在單擊時更新值

    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

對於我和其他有同樣問題的人

這里的主要問題是on.change這段代碼on( 'change:data'...將使編輯器在每次按鍵時發送post請求。

解決問題。

<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> 

希望這對我和其他人將來有幫助:)