#javascript #jquery #internet-explorer #ckeditor #jquery-ui-dialog
#javascript #jquery #internet-проводник #редактор #jquery-ui-dialog
Вопрос:
Я пытаюсь отобразить редактор ck в диалоговом окне jquery-ui, и он работает нормально — на первый взгляд.
Но в IE11, когда я нажимаю на любую кнопку инструмента, которая открывает выпадающий список / выделение (например, выбор цвета), при наведении курсора мыши появляется короткая вспышка требуемого наложения, но в следующий момент оно исчезает.
Он работает в Chrome и Edge, но в настоящее время IE11 является наиболее важным целевым браузером.
jQuery равен 1.11, jQuery-UI равен 1.11.4, CKEditor равен 4.15.1.
Я выяснил, что проблема возникает только тогда, когда диалог является модальным. Вот пример:
function openDialogEditor() {
var somedialog = document.createElement("div");
somedialog.id = "somedialog";
somedialog.innerHTML = '<div id="somediv"><textarea id="someid" name="somename" class="ckeditor" style="height:350px;">Stackoverflow is great!</textarea></div>';
document.body.appendChild(somedialog);
jQuery(somedialog).dialog({width: '800px', modal: true}).parent().promise().done(function(dlg) {
CKEDITOR.replace("someid");
});
}
Если вы измените modal: true на modal: false , проблема устранена, но диалоговое окно должно быть модальным.
Мой обходной путь: см. Ответ ниже.
Комментарии:
1. Предоставьте пример кода, относящийся к вашему вопросу, чтобы другие могли воспроизвести вашу проблему.
2. Конечно, @tomfrio. Поэтому я создал простой пример, и угадайте, что — проблема не возникает. Должны быть какие-то дополнительные обстоятельства, которые я еще не выяснил. Я вернусь с этим или сообщу решение. Пока спасибо!
3. Как насчет проблемы? Вы можете указать свое решение в качестве ответа и пометить его как принятый ответ, если вы его решили. В будущем это может помочь другим членам сообщества в подобных проблемах. Или вы можете предоставить воспроизводимый фрагмент кода, если вы его не решили.
4. Спасибо за предложение, @yu-zhou. У меня пока нет никакого решения, и я не смогу выполнить какую-либо работу над этим до следующей недели.
5. Неважно. Вы можете вернуться в любое удобное для вас время.
Ответ №1:
Возможное решение, работающее в IE11:
- Установите диалоговое окно на
modal: false. - Добавьте пользовательское наложение, используя классы css jquery.
- Удалите пользовательское наложение при закрытии диалогового окна.
(Мой пример кода также требует удаления редактора для повторного openDialogEditor() использования функции — это, конечно, также можно было бы обработать по-другому.)
1 2)
function openDialogEditor() {
var somedialog = document.createElement("div");
somedialog.id = "somedialog";
somedialog.innerHTML = '<div id="somediv"><textarea id="someid" name="somename" class="ckeditor" style="height:350px;">Stackoverflow is great!</textarea></div>';
document.body.appendChild(somedialog);
jQuery(somedialog).dialog({width: '800px', modal: false}).parent().promise().done(function(dlg) {
CKEDITOR.replace("someid");
dlg.css('z-index', '101').parent().append('<div id="ownOverlay" class="ui-widget-overlay ui-front" style="z-index:100"></div>');
});
}
- Расширить функцию закрытия диалогового окна:
jQuery.widget("ui.dialog", jQuery.ui.dialog, {
close: function(ev) {
// remove custom overlay:
jQuery("#ownOverlay").remove();
// remove dialog and editor:
var dlgDiv = jQuery(ev.target).closest('div[role="dialog"]')[0];
dlgDiv.parentNode.removeChild(dlgDiv);
return this._super(ev);
}
});
Если у вас есть лучшие решения, предложения, улучшения: пожалуйста, прокомментируйте. 🙂
Комментарии:
1. Спасибо за публикацию решения этой проблемы. Вы можете пометить свой ответ как принятый. В будущем это может помочь другим членам сообщества в подобных проблемах. Спасибо за понимание.