TinyMCE 4能否实现多文件独立撤销历史的多会话管理？

嘿，这个需求我之前做项目时刚好碰到过！TinyMCE 4默认的撤销/重做栈是和单个编辑器实例绑定死的，直接用setContent切换文件内容的话，之前的编辑历史肯定会被冲掉。下面是我实测有效的解决方案，核心思路是给每个文件单独维护一套编辑状态（包括内容、撤销栈、重做栈甚至光标位置）：

1. 构建文件状态存储对象 #

首先，我们需要一个全局对象来保存每个文件的完整编辑状态，这样切换时就能快速读取和恢复：

// 初始化文件状态存储，key是文件名，value是对应状态
const fileEditorStates = {
  'a.html': { content: '', undoStack: [], redoStack: [], selection: null },
  'b.html': { content: '', undoStack: [], redoStack: [], selection: null },
  'c.html': { content: '', undoStack: [], redoStack: [], selection: null }
};

// 用变量跟踪当前正在编辑的文件
let currentEditingFile = null;

2. 实现文件切换逻辑 #

切换文件时，我们要先把当前编辑器的状态保存到对应文件的记录里，再加载目标文件的状态并覆盖编辑器的撤销/重做栈：

function switchToFile(fileName) {
  const editor = tinymce.get('your-editor-id'); // 替换成你的编辑器ID

  // 第一步：保存当前文件的状态（如果有正在编辑的文件）
  if (currentEditingFile) {
    const currentState = fileEditorStates[currentEditingFile];
    // 保存当前内容
    currentState.content = editor.getContent();
    // 深拷贝撤销/重做栈，避免引用共享导致状态混乱
    currentState.undoStack = [...editor.undoManager.undoStack];
    currentState.redoStack = [...editor.undoManager.redoStack];
    // 保存光标选区，切换回来时能回到之前的编辑位置
    currentState.selection = editor.selection.getBookmark(2);
  }

  // 第二步：加载目标文件的状态
  currentEditingFile = fileName;
  const targetState = fileEditorStates[fileName];
  
  // 设置文件内容
  editor.setContent(targetState.content);
  // 替换编辑器的撤销/重做栈
  editor.undoManager.undoStack = [...targetState.undoStack];
  editor.undoManager.redoStack = [...targetState.redoStack];
  // 重置撤销管理器的索引（TinyMCE内部用这个跟踪栈的当前位置）
  editor.undoManager.index = editor.undoManager.undoStack.length;
  // 恢复光标位置
  if (targetState.selection) {
    editor.selection.moveToBookmark(targetState.selection);
  }
}

3. 初始化文件内容 #

当第一次打开某个文件时（比如从服务器加载内容后），记得初始化它的状态，确保第一次编辑就能生成正确的撤销历史：

function initFileContent(fileName, initialContent) {
  const editor = tinymce.get('your-editor-id');
  // 更新文件初始内容
  fileEditorStates[fileName].content = initialContent;
  // 创建初始的撤销节点（模拟编辑器首次加载内容的历史记录）
  fileEditorStates[fileName].undoStack = [editor.undoManager.createUndoLevel()];
  // 切换到这个文件
  switchToFile(fileName);
}

4. 注意事项 #

• 深拷贝栈对象：TinyMCE的undoStack和redoStack里是对象实例，直接赋值会导致不同文件共享同一栈引用，一定要用扩展运算符或者深拷贝函数来复制。
• 避免误触发事件：如果你的编辑器监听了change或save事件，切换文件时可以加个临时标记（比如isSwitchingFile），跳过不必要的业务逻辑。
• 内存优化：如果编辑的文件数量很多，可以在关闭文件时从fileEditorStates中移除对应的状态，避免内存占用过高。

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