如何在tinyMCE销毁前自动保存内容？（含关闭标签页、跳转等场景）

以下方案完全覆盖三类触发场景，兼容Chrome/Edge、Firefox、Safari全量主流版本，且无需给每个销毁编辑器的按钮单独绑定事件。

1. 覆盖浏览器关闭、跨站跳转场景 #

使用标准的*beforeunload事件即可覆盖关闭标签页、关闭浏览器、跳转至外部站点的场景，这个事件所有主流浏览器均支持。
由于你的编辑器内容体积很小，推荐用navigator.sendBeacon*API完成存库请求：这个API是W3C专门为页面卸载前的请求设计，不会被浏览器主动中断，稳定性远高于普通AJAX请求。
你也可以选择触发浏览器原生的未保存确认提示，两种方案二选一即可。
示例代码：

// 全局标记：编辑器内容是否有变更，避免无修改时重复触发保存/提示
let contentModified = false;

// tinyMCE初始化时绑定内容变更监听
tinymce.init({
  // 你的原有编辑器配置
  setup: (editor) => {
    editor.on('input change undo redo', () => {
      contentModified = true;
    });
  }
});

window.addEventListener('beforeunload', (e) => {
  // 内容无变更直接跳过
  if (!contentModified || !tinymce.activeEditor) return;

  // 方案A：自动保存内容
  const editorContent = tinymce.activeEditor.getContent();
  navigator.sendBeacon(
    '/你的存库接口路径',
    new URLSearchParams({ content: editorContent })
  );
  contentModified = false;

  // 方案B：弹出未保存确认提示（不需要自动保存就仅保留下面这行即可）
  e.returnValue = '存在未保存的内容，确认离开吗？';
});

2. 覆盖站内按钮触发编辑器销毁场景 #

不用给每个按钮单独绑定事件，使用事件委托统一监听所有点击即可：给所有会销毁编辑器的按钮加统一的规则（比如统一类名、固定的跳转路径前缀、按钮文本特征），在document层级捕获点击，命中规则时先执行保存逻辑，再走按钮原有逻辑。
示例代码：

document.addEventListener('click', (e) => {
  // 匹配所有会销毁编辑器的按钮，可根据你的实际场景调整匹配规则
  // 示例规则：匹配类名含destroy-editor-btn、跳转路径含help/settings/logout的元素
  const target = e.target.closest('.destroy-editor-btn, [href*="/help"], [href*="/settings"], [href*="/logout"]');
  if (!target || !contentModified || !tinymce.activeEditor) return;

  // 先阻止按钮原有逻辑执行
  e.preventDefault();
  e.stopImmediatePropagation();

  // 执行保存逻辑
  const editorContent = tinymce.activeEditor.getContent();
  fetch('/你的存库接口路径', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({ content: editorContent })
  }).then(() => {
    contentModified = false;
    // 保存成功后执行原有逻辑：a标签跳转，普通按钮触发原点击事件
    if (target.tagName === 'A') {
      window.location.href = target.href;
    } else {
      target.click();
    }
  });
}, true); // 开启捕获模式，确保当前逻辑优先于按钮原有绑定逻辑执行

为什么之前绑定remove事件无效 #

tinyMCE的remove事件是编辑器已经进入销毁流程后才触发的，此时大概率已经无法正常读取编辑器内容；如果是页面卸载场景，编辑器销毁逻辑甚至还没触发页面就已经卸载，因此这个事件不适合用来做销毁前的保存操作。

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