在我们的项目中,我们使用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/