当前位置：首页 > news >正文

如何实现完美撤销重做：Milkdown历史记录功能终极指南

news 2026/5/5 18:33:07

如何实现完美撤销重做：Milkdown历史记录功能终极指南

【免费下载链接】milkdown🍼 Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown

Milkdown是一个插件驱动的所见即所得Markdown编辑器框架，其历史记录功能能够帮助用户轻松实现文本编辑的撤销与重做操作，提升编辑体验。本文将详细介绍如何在Milkdown中使用和配置历史记录功能，让你轻松掌握这一实用技能。

Milkdown历史记录功能简介

Milkdown的历史记录功能由@milkdown/plugin-history插件提供，它基于ProseMirror的history模块实现，支持标准的撤销（Undo）和重做（Redo）操作。该插件不仅提供了默认的快捷键支持，还允许开发者根据需求自定义历史记录的行为。

快速上手：安装与基本使用

安装历史记录插件

要使用Milkdown的历史记录功能，首先需要安装@milkdown/plugin-history插件。你可以通过以下命令将其添加到项目中：

npm install @milkdown/plugin-history # 或者使用yarn yarn add @milkdown/plugin-history

基本使用方法

在Milkdown编辑器中使用历史记录功能非常简单，只需在编辑器初始化时引入并使用history插件即可：

import { Editor } from '@milkdown/core'; import { history } from '@milkdown/plugin-history'; import { commonmark } from '@milkdown/preset-commonmark'; Editor.make() .use(commonmark) .use(history) .create();

引入插件后，你就可以使用默认的快捷键进行撤销和重做操作了。

掌握撤销重做快捷键

Milkdown历史记录插件提供了直观的快捷键支持，让你可以快速执行撤销和重做操作：

撤销（Undo）：Mod-z（Windows/Linux上为Ctrl-z，Mac上为Cmd-z）
重做（Redo）：Mod-y或Shift-Mod-z（Windows/Linux上为Ctrl-y或Shift-Ctrl-z，Mac上为Cmd-y或Shift-Cmd-z）

这些快捷键符合大多数用户的使用习惯，无需额外学习即可上手。

高级配置：自定义历史记录行为

Milkdown历史记录功能支持通过配置来自定义其行为，以满足不同场景的需求。你可以通过historyProviderConfig来设置历史记录的深度和新组延迟等参数。

配置参数说明

historyProviderConfig支持以下参数：

depth：历史记录栈的最大深度，默认为100。设置较大的值可以保留更多的历史记录，但可能会增加内存占用。
newGroupDelay：在用户停止输入多少毫秒后创建一个新的历史记录组，默认为500ms。较小的值会创建更多的历史记录点，较大的值则会合并更多操作。

配置示例

以下是一个自定义历史记录配置的示例：

import { Editor } from '@milkdown/core'; import { history, historyProviderConfig } from '@milkdown/plugin-history'; import { commonmark } from '@milkdown/preset-commonmark'; Editor.make() .use(commonmark) .config((ctx) => { ctx.set(historyProviderConfig.key, { depth: 200, // 增加历史记录深度 newGroupDelay: 300, // 缩短新组延迟 }); }) .use(history) .create();

通过调整这些参数，你可以根据实际需求优化历史记录功能的行为。

编程式控制历史记录

除了使用快捷键外，Milkdown还提供了编程式的方式来控制历史记录，你可以通过调用undoCommand和redoCommand来执行撤销和重做操作。

命令调用示例

import { commandsCtx } from '@milkdown/core'; import { undoCommand, redoCommand } from '@milkdown/plugin-history'; // 在某个事件处理函数中 const commands = ctx.get(commandsCtx); // 执行撤销 commands.call(undoCommand.key); // 执行重做 commands.call(redoCommand.key);

这种方式允许你在自定义按钮或其他交互元素中集成撤销和重做功能，提供更灵活的用户体验。