execCommand 'undo' not working properly in Internet Explorer

Question

In our project we are using Bootstrap WYSIWYG plugin ( http://mindmup.github.io/bootstrap-wysiwyg/ ) and we are facing a problem with Internet Explorer. Although not officially supported, everything works in IE10 except the and actions. 和动作。 This plugin relies on document.execCommand() to execute all the actions the user needs.

You can test the issue in the demo editor in the plugin's site. Making some debug if you click the undo button you can see that document.execCommand('undo') is called but nothing happens. However if you type the command in the console it does undo the last action.

I was thinking if this was an IE problem (as this works perfectly on Chrome and FF), but execCommand('undo') actually works -> http://jsfiddle.net/c8mq2/1/

As we are using Backbone.js and in order to clarify wether if this was a plugin issue or not we dettached the undo button from the plugin and created a custom event like follows:

Backbone View:

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>

However no luck here neither, it seems it is not a plugin issue. What can be affecting to the IE's undo/redo stack that does not allow execCommand to work properly under some circumstances?

I cannot think on a different and straighter way of calling the execCommand('undo') as in the last Backbone example. Any light on this would be highly appreciated!

UPDATE: New findings

I found a way to make the undo action work and maybe this can show what is happening, but still don't understand why (you can try this in the bootstrap wysiwyg demo page above) ->

1. Click on the textarea and input some text.
2. Click on the undo button
3. Result: nothing happens .
4. Click on the textarea again.
5. Move the cursor to the undo button (don't click on it yet)
6. Type some text without moving the cursor from the button.
7. Click on the undo button
8. Result: IT WORKS
9. Repeat steps 6 and 7 without moving the cursor and it will still work.

It seems that hovering the cursor into the undo button breaks the undo/redo stack and that's what makes document.execCommand('undo') stop working properly on those cases. Is there any way to query that stack and see what is actually happening?

Thanks in advance!

Answer 1

Thanks to the last findings I finally found the origin of the problem. The thing is that both Bootstrap WYSIWYG demo page and our own project are using the editor in conjunction with Bootstrap Tooltip plugin and thus everytime you hover a button the tooltip element is attached to the DOM. Somehow Chrome and Firefox don't take this element as a change that affects document.execCommand('undo') but Internet Explorer does.

There may be other solutions but what we did was disabling tooltips for Internet Explorer browsers and relying on native titles on those cases.