TinyMCE6调用mceInsertContent API插入内容后被删除的问题咨询

可能的原因 #

• 焦点状态冲突：扩展插入脚本时，编辑器可能未处于激活焦点状态，Brightspace页面自带的焦点管理逻辑触发了内容回滚。交替出现的异常，大概率是每次插入后编辑器焦点状态交替变化导致的。
• 页面自定义钩子干扰：“整体反馈”这类特定页面可能给TinyMCE加了自定义监听（比如内容校验、自动保存钩子），扩展插入内容的时机刚好触发了这些钩子，导致内容被强制回滚。而控制台直接执行或切换焦点后，钩子的触发条件不满足，所以正常。
• 执行时序问题：扩展插入的脚本可能在TinyMCE内部状态未同步完成时执行，插入的内容被后续的状态同步操作覆盖。

解决/临时方案 #

1. 确保编辑器激活后再插入 #

先强制编辑器获取焦点，再加微小延迟避免时序冲突：

var script = document.createElement('script');
script.textContent = `
  console.log('AP talks to tinyMCE1...');
  setTimeout(() => {
    const editor = tinymce.activeEditor;
    if (editor) {
      editor.focus();
      editor.execCommand('mceInsertContent', false, ${JSON.stringify(request.sValue)});
      editor.execCommand('mceInsertContent', false, ' - just more.');
    }
  }, 100);
`;
(document.head||document.documentElement).appendChild(script);
script.remove();

2. 绕过execCommand直接操作内容 #

用getContent/setContent直接修改内容，避免execCommand触发页面钩子：

var script = document.createElement('script');
script.textContent = `
  console.log('AP talks to tinyMCE1...');
  const editor = tinymce.activeEditor;
  if (editor) {
    editor.focus();
    const currentContent = editor.getContent();
    editor.setContent(currentContent + ${JSON.stringify(request.sValue)} + ' - just more.');
    // 把光标移到内容末尾
    editor.selection.select(editor.getBody(), true);
    editor.selection.collapse(false);
  }
`;
(document.head||document.documentElement).appendChild(script);
script.remove();

3. 模拟焦点切换重置状态 #

既然切换焦点能解决问题，代码里先模拟失焦再聚焦：

var script = document.createElement('script');
script.textContent = `
  console.log('AP talks to tinyMCE1...');
  const editor = tinymce.activeEditor;
  if (editor) {
    editor.blur();
    setTimeout(() => {
      editor.focus();
      editor.execCommand('mceInsertContent', false, ${JSON.stringify(request.sValue)});
      editor.execCommand('mceInsertContent', false, ' - just more.');
    }, 50);
  }
`;
(document.head||document.documentElement).appendChild(script);
script.remove();

4. 临时禁用页面自定义钩子 #

如果能定位到页面监听的编辑器事件，可以临时移除再恢复：

var script = document.createElement('script');
script.textContent = `
  console.log('AP talks to tinyMCE1...');
  const editor = tinymce.activeEditor;
  if (editor) {
    editor.focus();
    // 临时移除NodeChange事件监听（根据实际情况调整事件名）
    const originalListeners = editor._eventListeners?.NodeChange || [];
    editor.off('NodeChange');
    editor.execCommand('mceInsertContent', false, ${JSON.stringify(request.sValue)});
    editor.execCommand('mceInsertContent', false, ' - just more.');
    // 恢复原有监听
    originalListeners.forEach(listener => editor.on('NodeChange', listener.callback));
  }
`;
(document.head||document.documentElement).appendChild(script);
script.remove();

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