Question

在我们的项目中，我们使用的是Bootstrap WYSIWYG插件（http://mindmup.github.io/bootstrap-wysiwyg/），我们遇到了Internet Explorer的问题。虽然没有得到官方支持，但除了'撤消'和'重做'操作外，一切都在IE10中有效。该插件依赖于document.execCommand()来执行用户需要的所有操作。

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

我在想是否这是一个IE问题（因为这在Chrome和FF上完美运行），但execCommand（'undo'）实际上有效 - ＆gt; 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>

然而，这里也没有运气，似乎这不是一个插件问题。什么可能影响IE的撤销/重做堆栈，在某些情况下不允许execCommand正常工作？

我不能像在上一个Backbone示例中那样以不同且更直接的方式调用execCommand（'undo'）。任何关于此的亮点都将受到高度赞赏！

更新：新发现

我找到了一种让撤消操作正常工作的方法，也许这可以显示正在发生的事情，但仍然不明白为什么（你可以在上面的bootstrap wysiwyg演示页面试试这个） - ＆gt;

点击textarea并输入一些文字。
点击撤消按钮
结果：没有任何反应。
再次点击textarea。
将光标移动到撤消按钮（不要再点击它）
键入一些文本而不从按钮移动光标。
点击撤消按钮
结果： IT工作
重复步骤6和7而不移动光标，它仍然有效。

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

提前致谢！

Answer 1

感谢最后的调查结果，我终于找到了问题的根源。问题是Bootstrap WYSIWYG演示页面和我们自己的项目都在使用编辑器和 Bootstrap Tooltip 插件，因此每次你悬停按钮时，工具提示元素都会附加到DOM。不知何故，Chrome和Firefox不会将此元素作为影响document.execCommand（＆＃39;撤消＆＃39;）的更改，但Internet Explorer会这样做。

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

execCommand'undor'在Internet Explorer中无法正常工作

1 个答案: