如何在Laravel Livewire中为CKEditor实现wire:model.lazy等效效果

核心调整思路 #

• 移除原有change:data事件监听，该事件会在每一次内容变更时触发同步，是导致频繁请求的核心原因
• 改用监听编辑器*失焦（blur）*事件实现和wire:model.lazy一致的同步逻辑
• 如需支持点击指定按钮触发同步，额外给目标按钮绑定点击事件执行同步逻辑即可

仅失焦同步实现代码 #

<script>
  ClassicEditor
    .create(document.querySelector('#body'))
    .then(editor => {
      // 监听编辑器失焦事件，仅失焦时同步内容到Livewire
      editor.editing.view.document.on('blur', () => {
        @this.set('body', editor.getData());
      })
    })
    .catch(error => {
      console.error(error);
    });
</script>

失焦+指定按钮触发同步实现代码 #

假设你需要点击ID为save-body-btn的按钮时也同步内容，调整代码如下：

<script>
  // 全局存储编辑器实例，方便多场景调用
  let ckEditorInstance;

  ClassicEditor
    .create(document.querySelector('#body'))
    .then(editor => {
      ckEditorInstance = editor;
      // 失焦同步逻辑
      editor.editing.view.document.on('blur', () => {
        @this.set('body', ckEditorInstance.getData());
      })
    })
    .catch(error => {
      console.error(error);
    });

  // 绑定指定按钮点击同步逻辑
  document.querySelector('#save-body-btn').addEventListener('click', () => {
    if (ckEditorInstance) {
      @this.set('body', ckEditorInstance.getData());
    }
  })
</script>

可选补充 #

如果需要完全对齐wire:model.lazy的触发规则（失焦+按下回车键触发），可以在编辑器初始化逻辑中额外添加回车事件监听：

editor.editing.view.document.on('keydown', (evt, data) => {
  if (data.keyCode === 13) {
    @this.set('body', editor.getData());
  }
})

内容的提问来源于stack exchange，提问作者kgcusi