在我们的项目中,我们使用Bootstrap WYSIWYG插件(http://mindmup.github.io/bootstrap-wysiwyg/),并且Internet Explorer遇到问题。尽管没有得到官方支持,但所有的功能都可以在IE10中正常工作,除了“撤消”和“重做”动作。该插件依靠document.execCommand()来执行用户所需的所有操作。

您可以在插件站点的演示编辑器中测试该问题。如果单击“撤消”按钮进行一些调试,则可以看到已调用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>


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

我无法想到像上一个Backbone示例中那样调用execCommand('undo')的另一种更直接的方法。任何对此的光将不胜感激!

更新:新发现

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


单击文本区域并输入一些文本。
点击撤消按钮
结果:什么都没有发生。
再次单击文本区域。
将光标移动到撤消按钮(请不要单击它)
键入一些文本,而无需从按钮移动光标。
点击撤消按钮
结果:IT工作
重复步骤6和7,而不移动光标,它仍然可以工作。


看来,将光标悬停在undo按钮上会破坏undo / redo堆栈,这就是document.execCommand('undo')在这些情况下停止正常工作的原因。有什么方法可以查询该堆栈并查看实际发生了什么?

提前致谢!

最佳答案

由于最后的发现,我终于找到了问题的根源。事实是,Bootstrap WYSIWYG演示页面和我们自己的项目都将编辑器与Bootstrap Tooltip插件结合使用,因此,每当您将鼠标悬停在某个按钮上时,tooltip元素都将附加到DOM。 Chrome和Firefox不知何故不会将此元素视为影响document.execCommand('undo')的更改,但Internet Explorer会影响。

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

关于javascript - execCommand'undo'在Internet Explorer中无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24363598/

10-09 19:43