如何在CKEditor 5中监听focus事件？代码回调未触发求助

我之前也碰到过类似的坑，CKEditor 5的事件系统和原生DOM事件逻辑有不少差异，直接绑定editor.on('focus')确实可能出现回调不执行的情况，给你几个实用的解决思路：

• 监听可编辑区域的原生DOM focus事件
  CKEditor的内容编辑区是一个独立的DOM元素，直接绑定它的原生focus事件往往更稳定。你可以通过editor.editable.element拿到这个元素，再用原生API监听：

  ClassicEditor.create(document.querySelector("#editable"))
    .then(editor => {
      editor.editable.element.addEventListener('focus', () => {
        console.log("Focused");
      });
    })
    .catch(error => {
      console.error('编辑器初始化失败:', error);
    });
  

• 绑定CKEditor封装的可编辑区focus事件
  有时候直接监听editor实例的focus事件不生效，是因为这个事件对应的是编辑器整体的焦点状态，而非内容编辑区。你可以尝试监听editor.editable对象的focus事件，这是CKEditor专门针对内容编辑区封装的事件：

  ClassicEditor.create(document.querySelector("#editable"))
    .then(editor => {
      editor.editable.on('focus', () => {
        console.log("Focused");
      });
    });
  

• 确认焦点真正落在内容编辑区
  有时候你以为编辑器获得了焦点，但实际焦点可能停在工具栏按钮或其他元素上。测试时可以手动点击内容编辑区，看看回调是否触发。也可以通过editor.isFocused属性实时检查编辑器的焦点状态，辅助排查：

  // 调试用：定时输出焦点状态
  setInterval(() => {
    console.log("编辑器是否聚焦:", editor.isFocused);
  }, 1000);
  

• 排查是否有代码干扰事件触发
  检查页面中是否有其他JS代码阻止了focus事件冒泡，比如调用event.stopPropagation()或event.preventDefault()的全局事件监听函数，这类代码可能会打断CKEditor的事件触发逻辑。

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