2014-06-23 157 views
0

在我們的項目中,我們使用的是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示例中一樣。任何燈光都會受到高度讚賞!

更新:新的發現

我找到了一種方法,使撤消操作的工作,也許這可以顯示發生了什麼,但還是不明白爲什麼(你可以在引導所見即所得演示試試這個頁面上方) - >

  1. 點擊textarea並輸入一些文字。
  2. 點擊撤銷按鈕
  3. 結果:沒有任何反應
  4. 再次點擊textarea。
  5. 移動光標到撤消按鈕(不要點擊它)
  6. 鍵入一些文本,而不用移動光標從按鈕。
  7. 點擊撤銷按鈕
  8. 結果:IT WORKS
  9. 重複步驟6,7不移動光標,它仍然可以工作。

看起來,將光標懸停在撤消按鈕中會中斷撤銷/重做堆棧,這就是在這些情況下,document.execCommand('undo')停止正常工作的原因。有什麼方法可以查詢堆棧並查看實際發生的情況嗎?

提前致謝!

回答

1

感謝上次的調查結果,我終於找到了問題的根源。問題是,Bootstrap WYSIWYG演示頁面和我們自己的項目都使用編輯器和Bootstrap Tooltip插件,因此每次您將鼠標懸停在按鈕上時,工具提示元素都會附加到DOM。不知何故,Chrome和Firefox不會將此元素視爲影響document.execCommand('撤消')但Internet Explorer所做的更改。

可能有其他解決方案,但我們所做的是禁用Internet Explorer瀏覽器的工具提示,並依靠這些情況下的本地標題。

相關問題