Блог

В нашем проекте мы используем загрузочный плагин 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 и чтобы уточнить, была ли это проблема с плагином или нет, мы отключили кнопку отмены от плагина и создали пользовательское событие следующим образом:

Представление магистрали:

 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. Любой свет на это будет высоко оценен!

ОБНОВЛЕНИЕ: новые результаты

Я нашел способ заставить действие отмены работать, и, возможно, это может показать, что происходит, но все еще не понимаю, почему (вы можете попробовать это на демонстрационной странице bootstrap wysiwyg выше) ->

1. Нажмите на текстовую область и введите некоторый текст.
2. Нажмите на кнопку отмены
3. Результат: ничего не происходит.
4. Нажмите на текстовую область еще раз.
5. Переместите курсор на кнопку отмены (пока не нажимайте на нее)
6. Введите текст, не отводя курсор от кнопки.
7. Нажмите на кнопку отмены
8. Результат: ЭТО РАБОТАЕТ
9. Повторите шаги 6 и 7, не перемещая курсор, и он все равно будет работать.

Кажется, что наведение курсора на кнопку отмены нарушает стек отмены / повтора, и именно из-за этого document.execCommand(‘undo’) перестает работать должным образом в этих случаях. Есть ли какой-нибудь способ запросить этот стек и посмотреть, что происходит на самом деле?

Заранее спасибо!

Благодаря последним выводам я наконец нашел причину проблемы. Дело в том, что как демонстрационная страница Bootstrap WYSIWYG, так и наш собственный проект используют редактор совместно с плагином всплывающей подсказки Bootstrap, и поэтому при каждом наведении курсора мыши элемент всплывающей подсказки прикрепляется к DOM. Каким-то образом Chrome и Firefox не воспринимают этот элемент как изменение, влияющее на document.execCommand(‘отменить’), но Internet Explorer это делает.

Могут быть и другие решения, но то, что мы сделали, это отключили всплывающие подсказки для браузеров Internet Explorer и полагались на собственные заголовки в этих случаях.