浏览器

时间:2017-08-09 21:27:23

标签: events editor text-editor rich-text-editor undo

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

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

这是关于此问题的W3C thread。截至撰写本文时,似乎解决方案仍在进行中......

Quill,另一个浏览器文本编辑器遇到这个问题时,他们的团队似乎advise:“禁用本机撤消/堆栈”,这就是Facebook的Draft.js实际上{{} 3}}。鉴于这似乎是我们正在使用的,有没有人知道禁用/替换浏览器的本机撤消/重做堆栈的方法?显然,这是一个积极的解决方案,但是,在撰写本文时,这似乎是唯一的选择。

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

1 个答案:

答案 0 :(得分:0)

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