javascript - execCommand 'undo' 在 Internet Explorer 中无法正常工作

Question

在我们的项目中，我们使用 Bootstrap WYSIWYG 插件 ( http://mindmup.github.io/bootstrap-wysiwyg/ )，但我们在使用 Internet Explorer 时遇到了问题。尽管没有得到官方支持，但除了 'undo' 和 'redo' 操作之外，所有功能都可以在 IE10 中运行。该插件依赖 document.execCommand() 来执行用户需要的所有操作。

您可以在插件站点的演示编辑器中测试该问题。如果单击撤消按钮进行一些调试，您可以看到 document.execCommand('undo') 被调用，但没有任何反应。但是，如果您在控制台中键入命令，它会撤消上一个操作。

我在想这是否是 IE 问题(因为这在 Chrome 和 FF 上完美运行)，但 execCommand('undo') 实际上有效 -> http://jsfiddle.net/c8mq2/1/

由于我们使用的是 Backbone.js，为了澄清这是否是插件问题，我们从插件中分离了撤消按钮，并创建了一个自定义事件，如下所示:

主干 View :

events: {           
        'click #undoAction': 'undoAction'
    },

undoAction: function (e) {
        e.preventDefault();
        document.execCommand('undo');
    }

HTML:

<div class="btn-group">
<!-- undo dettached from plugin -->
     <a class="btn" id="undoAction"><i class="icon-undo"></i></a>
<!-- redo keeps attached to plugin's data-edit attribute -->
     <a class="btn" data-edit="redo" "><i class="icon-repeat"></i></a>
</div>

但是这里也没有运气，看来这不是插件问题。在某些情况下，哪些因素会影响 IE 的撤消/重做堆栈，导致 execCommand 无法正常工作？

我无法像上一个 Backbone 示例那样考虑一种不同且更直接的调用 execCommand('undo') 的方法。对此的任何说明都将受到高度赞赏!

更新:新发现

我找到了一种使撤消操作起作用的方法，也许这可以显示正在发生的情况，但仍然不明白为什么(您可以在上面的 bootstrap wysiwyg 演示页面中尝试此操作)->

1. 单击文本区域并输入一些文本。
2. 点击撤消按钮
3. 结果:什么也没发生。
4. 再次单击文本区域。
5. 将光标移至撤消按钮(先不要点击它)
6. 键入一些文本，而不将光标从按钮上移开。
7. 点击撤消按钮
8. 结果:有效
9. 在不移动光标的情况下重复步骤 6 和 7，它仍然有效。

似乎将光标悬停在撤消按钮上会破坏撤消/重做堆栈，这就是导致 document.execCommand('undo') 在这些情况下停止正常工作的原因。有什么方法可以查询该堆栈并查看实际发生的情况吗？

提前致谢!

Answer 1

感谢最后的发现，我终于找到了问题的根源。问题是 Bootstrap WYSIWYG 演示页面和我们自己的项目都将编辑器与 Bootstrap Tooltip 插件结合使用，因此每次您悬停按钮时，工具提示元素都会附加到 DOM。不知何故，Chrome 和 Firefox 不会将此元素视为影响 document.execCommand('undo') 的更改，但 Internet Explorer 会这样做。

可能还有其他解决方案，但我们所做的是禁用 Internet Explorer 浏览器的工具提示并在这些情况下依赖 native 标题。