用于在浏览器中撤消的事件侦听器

Question

为了提供上下文，我的团队正在浏览器中构建一个富文本编辑器，它需要在会话之间将状态持久化到服务器。 编辑器的状态显然可以从更新到包含 keydown 事件的文档发生变化，但我们还应该考虑由 undo/redo 事件触发的编辑器阶段的更新。

不幸的是，浏览器没有本机撤消/重做事件（ ref ）。 一个提议的hack似乎是停止传播除了禁用上下文菜单之外映射到撤消的键盘快捷键的 keydown 事件。 但是，这仍然为用户提供了直接导航到应用程序菜单栏中的Edit -> Undo的能力，这将直接触发document.execCommand('undo')并且不会触发事件。 因此，我们不知道向服务器发送更新。

这是有关此问题的 W3C主题。 在撰写本文时，似乎解决方案仍在制定中......

当另一个浏览器文本编辑器Quill遇到这个问题时，他们的团队似乎建议：“禁用本机撤消/堆栈”，这正是 Facebook 的Draft.js实际所做的。 鉴于这似乎是我们正在使用的，有没有人知道禁用/替换浏览器的本机撤消/重做堆栈的方法？ 显然，这是一个激进的解决方案，但是，在撰写本文时，这似乎是唯一的选择。

与此同时，这个问题的答案可能埋藏在草案代码的某个地方。 如果没有人击败我的团队，我会报告草案似乎在做什么。 认为至少值得记录这个问题。

Answer 1

可能最好的解决方案是监听来自contentEditable元素的去抖动onChange事件。 这不允许关于撤消的自定义行为，但它应该解决主要问题。 还添加一个beforeunload事件来提醒用户潜在的未保存更改应该处理额外的边缘情况。