如何实现EasyMDE编辑器的编辑完成事件？避免Blur事件误触发

核心思路是在blur事件触发时，判断获得焦点的新元素是否属于EasyMDE的工具栏或编辑器容器，仅当两者都不满足时，才认定用户真正离开编辑器并执行“编辑完成”逻辑。

修改后的实现代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

<textarea></textarea>
<script>
const easyMDE = new EasyMDE();

easyMDE.codemirror.on("blur", (cm, event) => {
  // 获取失去焦点后获得焦点的元素
  const focusedElement = event.relatedTarget;
  // 获取EasyMDE工具栏和编辑器容器
  const toolbar = document.querySelector('.easymde-toolbar');
  const editorContainer = cm.getWrapperElement();

  // 仅当焦点不在工具栏也不在编辑器容器内时，触发编辑完成逻辑
  if (!toolbar.contains(focusedElement) && !editorContainer.contains(focusedElement)) {
    console.log("编辑完成事件触发");
    // 在此处添加你的编辑完成处理逻辑
  }
});
</script>

关键逻辑说明 #

• event.relatedTarget：在blur事件中，该属性指向用户点击后获得焦点的元素，用来判断是否点击了工具栏。
• toolbar.contains(focusedElement)：检查焦点是否落在工具栏内部（包括按钮、下拉菜单等所有工具栏元素）。
• editorContainer.contains(focusedElement)：检查焦点是否仍在编辑器容器范围内（比如编辑器的其他交互区域）。

备选延迟判断方案（解决特殊场景问题） #

如果遇到某些浏览器下relatedTarget为空的情况，可以用延迟判断当前激活元素：

easyMDE.codemirror.on("blur", () => {
  setTimeout(() => {
    const focusedElement = document.activeElement;
    const toolbar = document.querySelector('.easymde-toolbar');
    const editorContainer = easyMDE.codemirror.getWrapperElement();
    
    if (!toolbar.contains(focusedElement) && !editorContainer.contains(focusedElement)) {
      console.log("编辑完成事件触发");
    }
  }, 100);
});

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