如何在React-Ace封装的Ace Editor中清除撤销/重做历史？

我之前在项目里用React-Ace的时候也踩过destroy()的坑——这个方法本质是用来销毁整个编辑器实例的，要是你之后还要继续使用编辑器，或者在组件未卸载时调用，很容易出现DOM异常、内存泄漏之类的问题，完全不是清空历史的正确姿势。给你几个经过实践验证的可行方案：

方案一：直接替换UndoManager（最推荐） #

Ace编辑器的撤销/重做历史是由UndoManager实例管理的，我们只需要给编辑器替换一个全新的UndoManager，就能彻底清空历史记录，而且不会影响编辑器的正常使用。

类组件示例： #

import React from 'react';
import AceEditor from 'react-ace';
import ace from 'ace-builds';

class MyEditor extends React.Component {
  aceRef = React.createRef();

  clearUndoRedoHistory = () => {
    // 确保编辑器实例已初始化
    if (this.aceRef.current && this.aceRef.current.editor) {
      // 替换新的UndoManager，原历史会被完全清空
      this.aceRef.current.editor.setUndoManager(new ace.UndoManager());
    }
  };

  render() {
    return (
      <AceEditor
        ref={this.aceRef}
        // 你的其他编辑器配置
        mode="javascript"
        theme="monokai"
      />
    );
  }
}

函数组件示例（使用useRef）： #

import React, { useRef } from 'react';
import AceEditor from 'react-ace';
import ace from 'ace-builds';

const MyEditor = () => {
  const aceRef = useRef(null);

  const clearUndoRedoHistory = () => {
    if (aceRef.current && aceRef.current.editor) {
      aceRef.current.editor.setUndoManager(new ace.UndoManager());
    }
  };

  return (
    <AceEditor
      ref={aceRef}
      mode="javascript"
      theme="monokai"
      // 其他配置
    />
  );
};

方案二：重置内容+清空历史（适合需要同时重置内容的场景） #

如果你需要在清空历史的同时把编辑器内容也重置为空，可以结合setValue和UndoManager替换：

clearHistoryAndResetContent = () => {
  if (this.aceRef.current && this.aceRef.current.editor) {
    // 重置内容，第二个参数1表示光标定位到内容末尾
    this.aceRef.current.editor.setValue('', 1);
    // 清除选中状态（可选）
    this.aceRef.current.editor.clearSelection();
    // 清空历史
    this.aceRef.current.editor.setUndoManager(new ace.UndoManager());
  }
};

注意事项 #

• 一定要确保编辑器实例已经完全初始化后再调用这些方法，比如在类组件的componentDidMount之后，或者函数组件的useEffect（依赖编辑器ref）里执行，避免因为ref未挂载导致报错。
• 如果你是动态加载Ace的资源，要确保ace对象已经可用后再创建UndoManager实例。

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