嘿，我来帮你搞定这个需求！CodeMirror本身就内置了撤销和重做的核心方法，咱们只需要把图标点击事件和这些方法绑定就行，分两种常见版本（CodeMirror 5和CodeMirror 6）给你讲清楚：

一、CodeMirror 5 实现方案 #

1. 先准备HTML结构（图标/按钮） #

假设你已经有了图标元素，这里用按钮+图标符号示例，你可以换成自己的图标标签（比如<i>）：

<!-- 撤销图标按钮 -->
<button id="undoIcon">↶ 撤销</button>
<!-- 重做图标按钮 -->
<button id="redoIcon">↷ 重做</button>
<!-- CodeMirror 绑定的文本域 -->
<textarea id="myCodeEditor"></textarea>

2. 初始化CodeMirror编辑器 #

先创建编辑器实例，记得根据你的需求配置模式、主题等：

// 初始化CodeMirror 5实例
const editor = CodeMirror.fromTextArea(document.getElementById('myCodeEditor'), {
  lineNumbers: true, // 显示行号
  mode: 'javascript', // 语法高亮模式，可替换为你需要的语言
  theme: 'default', // 主题
  indentUnit: 2 // 缩进单位
});

3. 绑定图标点击事件 #

直接调用CodeMirror提供的undo()和redo()方法，建议先判断是否可以执行对应操作，避免无效点击：

// 绑定撤销图标点击事件
document.getElementById('undoIcon').addEventListener('click', () => {
  if (editor.canUndo()) { // 先检查是否有可撤销操作
    editor.undo();
  }
});

// 绑定重做图标点击事件
document.getElementById('redoIcon').addEventListener('click', () => {
  if (editor.canRedo()) { // 先检查是否有可重做操作
    editor.redo();
  }
});

4. 优化：动态切换按钮状态（可选） #

为了提升用户体验，我们可以根据编辑器状态自动禁用/启用图标按钮：

// 监听编辑器内容变化，更新按钮状态
editor.on('change', () => {
  document.getElementById('undoIcon').disabled = !editor.canUndo();
  document.getElementById('redoIcon').disabled = !editor.canRedo();
});

// 初始化时先设置一次初始状态
document.getElementById('undoIcon').disabled = !editor.canUndo();
document.getElementById('redoIcon').disabled = !editor.canRedo();

二、CodeMirror 6 实现方案 #

CodeMirror 6的API和CM5差异较大，采用了命令式的设计，咱们这样做：

1. 准备HTML结构 #

<button id="undoIcon">↶ 撤销</button>
<button id="redoIcon">↷ 重做</button>
<!-- CM6用容器而非textarea -->
<div id="editorContainer"></div>

2. 导入依赖并初始化编辑器 #

首先确保你已经安装了CM6的相关包，然后初始化视图：

import { EditorView, keymap } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
// 导入撤销/重做相关命令
import { undo, redo, canUndo, canRedo } from '@codemirror/commands';

// 创建编辑器视图
const view = new EditorView({
  state: EditorState.create({
    doc: '', // 初始内容
    extensions: [
      javascript(), // JS语法支持
      keymap.of([/* 自定义快捷键（可选） */])
    ]
  }),
  parent: document.getElementById('editorContainer')
});

3. 绑定图标点击事件 #

调用CM6提供的undo和redo命令，同样先判断操作是否可行：

// 撤销事件绑定
document.getElementById('undoIcon').addEventListener('click', () => {
  if (canUndo(view.state)) {
    undo(view);
  }
});

// 重做事件绑定
document.getElementById('redoIcon').addEventListener('click', () => {
  if (canRedo(view.state)) {
    redo(view);
  }
});

4. 优化：动态更新按钮状态（可选） #

通过监听视图更新来同步按钮状态：

// 添加视图更新监听器
view.dispatch({
  effects: EditorView.updateListener.of(update => {
    // 只有当文档变化时才更新状态
    if (update.docChanged) {
      document.getElementById('undoIcon').disabled = !canUndo(update.state);
      document.getElementById('redoIcon').disabled = !canRedo(update.state);
    }
  })
});

// 初始化状态设置
document.getElementById('undoIcon').disabled = !canUndo(view.state);
document.getElementById('redoIcon').disabled = !canRedo(view.state);

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