execCommand 'undo' Internet Explorer 中無法正常工作

Question

在我们的项目中，我们正在使用Bootstrap所见即所得插件(http://mindmup.github.io/bootstrap-wysiwyg/)，我们正面临着Internet Explorer的问题。虽然没有官方支持，但在IE10中除了'undo'和'redo'操作外，其他操作都可以正常工作。这个插件依赖于document.execCommand()来执行用户需要的所有操作。

你可以在插件站点的演示编辑器中测试这个问题。进行一些调试，如果您单击undo按钮，您可以看到document.execCommand('undo')被调用，但没有发生任何事情。但是，如果您在控制台中输入命令，则会撤消最后一个操作。

我在想，如果这是一个IE问题(因为这在Chrome和FF上完美地工作)，但execCommand('undo')实际上工作-> http://jsfiddle.net/c8mq2/1/

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

骨干视图:

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在某些情况下正常工作?

我想不出一种不同的、更直接的方式来调用execCommand('undo')，就像在上一个Backbone示例中一样。这将是高度赞赏的任何光!

UPDATE: New findings

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

1. 点击文本区域，输入一些文本。
2. 点击撤销按钮
3. 结果:没有发生。
再次点击文本区域。
4. 移动光标到撤销按钮(先不要点击)
5. 键入一些文本，而不将光标从按钮上移开。
6. 点击撤销按钮
7. 结果:IT WORKS
重复步骤6和7，不移动光标，它仍然会工作。

似乎将光标悬停在撤销按钮中会破坏撤销/重做堆栈，这就是为什么document.execCommand('undo')在这些情况下停止正常工作。有没有办法查询堆栈，看看到底发生了什么?

提前感谢!

Answer 1

多亏了最后的发现，我终于找到了问题的根源。问题是，Bootstrap所见即所得的演示页面和我们自己的项目都使用编辑器与Bootstrap工具提示插件，因此每次你悬停一个按钮的工具提示元素附加到DOM。不知何故，Chrome和Firefox不会将此元素作为影响document.execCommand('undo')的更改，但Internet Explorer会。

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