在我們的項目中,我們使用的是Bootstrap WYSIWYG插件(http://mindmup.github.io/bootstrap-wysiwyg/),並且我們遇到了Internet Explorer的問題。雖然沒有官方的支持,但除了'撤銷'和'重做'行動以外,一切都在IE10中起作用。該插件依賴於document.execCommand()
來執行用戶需要的所有操作。execCommand'undo'在Internet Explorer中無法正常工作
您可以在插件站點的演示編輯器中測試問題。如果單擊撤消按鈕進行一些調試,您會看到調用了document.execCommand('undo')
,但沒有任何反應。但是,如果您在控制檯中鍵入命令,則會撤消最後一個操作。
我就在想,如果這是一個IE瀏覽器的問題(因爲這完美的作品在Chrome和FF),但將execCommand(「撤消」)實際工作 - >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在某些情況下正常工作?
我不能想象調用execCommand('undo')的另一種更直接的方式,就像在最後的Backbone示例中一樣。任何燈光都會受到高度讚賞!
更新:新的發現
我找到了一種方法,使撤消操作的工作,也許這可以顯示發生了什麼,但還是不明白爲什麼(你可以在引導所見即所得演示試試這個頁面上方) - >
- 點擊textarea並輸入一些文字。
- 點擊撤銷按鈕
- 結果:沒有任何反應。
- 再次點擊textarea。
- 移動光標到撤消按鈕(不要點擊它)
- 鍵入一些文本,而不用移動光標從按鈕。
- 點擊撤銷按鈕
- 結果:IT WORKS
- 重複步驟6,7不移動光標,它仍然可以工作。
看起來,將光標懸停在撤消按鈕中會中斷撤銷/重做堆棧,這就是在這些情況下,document.execCommand('undo')停止正常工作的原因。有什麼方法可以查詢堆棧並查看實際發生的情況嗎?
提前致謝!