浏览器中撤消的事件侦听器

Event listener for undo in browsers

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

不幸的是浏览器没有原生undo/redo事件ref). One proposed 浮动似乎是为了停止传播映射到撤消键盘快捷键的按键事件除了禁用上下文菜单。但是,这仍然使用户能够直接导航到应用程序菜单栏中的Edit -> Undo,这将直接触发 document.execCommand('undo') 而不会触发事件。因此我们不知道向服务器发送更新。

这是关于此问题的 W3C thread。在撰写本文时,似乎仍在制定解决方案...

Quill, another browser text editor, ran into this issue their team seemed to advise: "disable the native undo/stack", which is what Facebook's Draft.js actually does。鉴于这似乎是我们正在使用的东西,有没有人知道 disable/substitute 浏览器的本机 undo/redo 堆栈 的方法?显然,这是一个激进的解决方案,但在撰写本文时,这似乎是唯一的选择。

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

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