Quill 如何配置 History 模块的 delay、maxStack、与 userOnly 控制撤销重做行为【免费下载链接】quillQuill is a modern WYSIWYG editor built for compatibility and extensibility项目地址: https://gitcode.com/GitHub_Trending/qu/quill在集成 Quill 的富文本编辑器中撤销重做行为经常不符合预期连续输入被拆成一堆撤销步、撤销历史无限增长或者通过 API 插入的富文本内容混进了用户的撤销历史里。Quill 内置的 History 模块负责处理 undo/redo它提供delay、maxStack、userOnly三个配置项可以在初始化 Quill 实例时通过modules键直接覆盖。本文基于 History 模块文档 与源码 packages/quill/src/modules/history.ts说明如何配置这三个选项并验证效果。准备条件History 是 Quill 的必需模块不需要显式启用。根据 Modules 文档Clipboard、Keyboard 和 History 是 Quill 必需模块“do not need to be included explicitly, but may be configured like any other module”——也就是说即使配置里不写history模块也在运行使用默认值你只需要在modules中给出要覆盖的选项。前提是页面上已有一个可用的 Quill 实例。按 Installation 文档npm 方式安装文档命令中的{{site.version}}是文档站模板变量按 packages/website/env.js 取自 website 包的version字段当前解析为2.0.3npm install quill2.0.3然后在脚本中导入并挂载到一个容器元素上#editor为页面中容器的 CSS selector沿用文档示例import Quill from quill; const quill new Quill(#editor);如果容器初始内容非空Quill 会以容器现有内容作为初始文档见 Quickstart。配置 delay、maxStack 与 userOnly在构造函数第二个参数的modules.history下写配置。以下是 History 文档给出的完整示例三个选项同时覆盖const quill new Quill(#editor, { modules: { history: { delay: 2000, maxStack: 500, userOnly: true }, }, theme: snow });只覆盖需要的项即可未写的项沿用默认值。三个选项的含义与默认值如下均来自 History 文档选项默认值作用delay1000时间窗口毫秒。窗口内的多次变更合并为一条历史被合并的变更按一次计算maxStack100undo/redo 栈的最大条目数userOnlyfalse是否只把用户输入计入撤销历史默认值与源码中的DEFAULTS一致可在 history.ts 核对static DEFAULTS: HistoryOptions { delay: 1000, maxStack: 100, userOnly: false, };逐项说明delay发生在delay毫秒内的变更会被合并为一条历史。文档给出的对照示例delay设为0时几乎每个字符都单独记录为一条变更undo 就是一次退一个字符设为1000时undo 会撤销最近 1000 毫秒内的全部变更。调整这个值就是在调整“一次撤销回退多远”。maxStack撤销/重做栈的上限。由于delay合并后的变更按一条计算实际能撤销的步数取决于合并结果而不是按键次数。当 undo 栈条目超过maxStack时最旧的一条会被移出见 record() 实现。userOnly默认false时无论变更来自用户输入还是通过 API 编程触发History 一视同仁地记录并可撤销/重做设为true后只有用户变更会被撤销或重做。源码中对应的判断是userOnly为true且变更 source 不是user时不调用record()只对已有栈做 transform见 history.ts。验证配置是否生效History 文档提供了四个 API 方法可手动触发来观察行为undo()撤销上一次变更redo()在上次操作是撤销时重做该撤销否则不做任何事clear()清空历史栈cutoff()见下一节。quill.history.undo(); quill.history.redo(); quill.history.clear();按文档描述的行为逐项核对验证delay将delay设为0连续输入几个字符然后调用quill.history.undo()——按文档示例每次 undo 应只回退一个字符改回1000再重复一次 undo 会回退最近 1000 毫秒内的全部输入。这是文档原文给出的对照现象用它判断合并窗口是否按预期工作。验证maxStack以默认100为例制造超过 100 条历史后连续 undo最多能撤销 100 步超出部分最旧变更已从栈中移出无法再撤销。验证userOnly置为true后先做一次用户输入再通过 API如quill.setContents(...)插入一段程序化内容然后 undo——按文档只有用户变更会被撤销程序化变更不在撤销范围内。另外History 模块在构造时会注册键盘绑定{ key: z, shortKey: true }触发 undo{ key: [z, Z], shortKey: true, shiftKey: true }触发 redoWindows 平台navigator.platform匹配/Win/i额外绑定{ key: y, shortKey: true }触发 redo见 history.ts 构造函数。因此页面上直接用快捷键操作也能验证上述行为不必依赖 JS 调用。配合 delay 使用的两个 APIcutoff 与 clearcutoff()与delay直接相关按文档说明通常短时间内的变更由delay配置会合并为一条调用cutoff()会重置合并窗口使调用前后的变更不会被合并。quill.history.cutoff();源码实现即把合并窗口的时间戳归零this.lastRecorded 0下一条变更会开启新的合并窗口。适合在“用户操作”与“程序批量写入”之间切开让两者各自成为独立的撤销步。clear()则清空 undo 与 redo 两个栈文档示例为quill.history.clear()适用于加载了新文档、需要丢弃旧撤销历史的场景。小结与边界三个选项只需写在new Quill(...)的modules.history下即可覆盖默认值delay: 1000、maxStack: 100、userOnly: falseHistory 模块本身无需显式启用。delay控制单次撤销回退的距离maxStack控制可撤销的总步数上限userOnly决定是否把程序化变更纳入撤销历史需要手动控制栈时再配合cutoff()和clear()。验证手段是 History 文档列出的undo/redo/clear/cutoffAPI 与模块自带的键盘绑定预期现象以 History 文档中对各选项的行为描述为准。更多选项含义与示例可直接查 History Module模块启用与替换机制见 Modules。【免费下载链接】quillQuill is a modern WYSIWYG editor built for compatibility and extensibility项目地址: https://gitcode.com/GitHub_Trending/qu/quill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考