execCommand 'undo' 在 Internet Explorer 中无法正常工作答案

【问题标题】：execCommand 'undo' not working properly in Internet ExplorerexecCommand 'undo' 在 Internet Explorer 中无法正常工作
【发布时间】：2014-06-23 10:24:48
【问题描述】：

在我们的项目中，我们使用的是 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 时，为了澄清这是否是插件问题，我们从插件中分离了撤消按钮并创建了一个自定义事件，如下所示：

主干视图：

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>

但是这里也没有运气，这似乎不是插件问题。在某些情况下不允许 execCommand 正常工作的 IE 撤消/重做堆栈会受到什么影响？

我想不出像上一个 Backbone 示例中那样调用 execCommand('undo') 的不同且更直接的方式。对此的任何启示将不胜感激！

更新：新发现

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

单击文本区域并输入一些文本。
点击撤消按钮
结果：没有任何反应。
再次单击文本区域。
将光标移至撤消按钮（先不要点击）
在不将光标从按钮上移开的情况下键入一些文本。
点击撤消按钮
结果：工作正常
重复步骤 6 和 7 而不移动光标，它仍然可以工作。

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

提前致谢！

【问题讨论】：

标签： javascript internet-explorer backbone.js

【解决方案1】：

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

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

【讨论】：