Диалоговое окно jQuery modal и диалог ввода CKEditor

ОБНОВЛЕНИЕ РЕШЕНИЯ

Проведя когда-нибудь поиск, я думаю, что смогу сделать обходным путем. Для меня единственной особенностью использования модального диалога является то, что он предотвращает доступ к элементам за ним. Я считаю, что это так же, как использование немодального диалога с наложением за ним. Оверлей просто сделал трюк быть модальным диалогом (хотя его полнофункциональный модальный).

Итак, это мое решение, прежде чем инициализировать диалог, я вставляю перед ним элемент div и присваиваю классу ui-widget-overlay div. Его можно использовать с помощью метода .insertBefore(). И затем, в диалоговом "закрытии" события, я удаляю этот оверлейный div. Параметр "модальный" для диалога установлен на false. Используя это решение, CKEditor pop up работает нормально, потому что есть только один модальный диалог (CKEditor всплывает).

Вот весь код в jsfiddle. Надеюсь, это поможет.

Я использую jQuery для отображения диалога. Я установил это диалоговое окно в модальный режим. Внутри этого диалога я включаю текстовое поле, которое затем будет использоваться с CKEditor. Когда я показываю диалог, текстовое поле хорошо преобразуется CKEditor. Но при попытке включить изображение (CKEditor отображает ITS OWN DIALOG для ввода), я не могу использовать URL-адрес.

Это мой код для запуска диалога:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: true
});

С этой конфигурацией я не могу щелкнуть текстовое поле и ввести его.

И затем я выясню, что , если я устанавливаю модальное значение false, тогда он должен работать.

Это код:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: false
});

С этим кодом все нормально, я могу нажать на текстовое поле и набрать.

Поскольку мне нужно включить модальный режим, это становится моей проблемой. Я думаю, что это связано с тем, что z-index из диалога jQuery (или аналогичный этому) блокирует диалог ввода CKEditor. Кто-нибудь может мне помочь?

Ответ 1

Недавно (как раз на этой неделе) я столкнулся с подобной проблемой. Я собирался сделать именно то, что вы сделали в jsfiddle, который вы предоставили. Тем не менее, после некоторых исследований и игр с тем, что происходит в диалоговом интерфейсе UI и том, что происходило с разметкой на странице, я наконец понял, что мне нужно делать.

Все о виджета factory и _allowInteraction.

Для меня я использовал сетку Sencha ExtJs с фильтром в диалоговом окне jQuery. Сетка работала нормально, но фильтры (фильтр текстовых полей) просто не сработали. Это произошло потому, что при отображении фильтров они находятся вне диалогового окна div или тега .ui-dialog.

Если вы выкапываете код интерфейса диалога в функции _allowInteraction, он делает следующее.

//From the jQuery dialog UI
_allowInteraction: function(event) {
    if($(event.target).closest('.ui-dialog').length) {
        return true;
    }

    // TODO: Remove hack when datepicker implements
    // the .ui-front logic (#8989)
    return !!$( event.target ).closest(".ui-datepicker").length;
}

Все, что мне нужно было сделать, это добавить javascript файл после файла jQuery UI со следующим кодом:

$.widget('ui.dialog', $.ui.dialog, {
    _allowInteraction: function( event ) {
        //This overrides the jQuery Dialog UI _allowInteraction to handle the sencha
        //extjs filter not working.
        //this._super(event) passes onto the base jQuery UI
        return !!$( event.target ).closest( ".x-panel :input" ).length || this._super( event );
    }
}

Поскольку _allowInteraction загорается всякий раз, когда фокус теряется из диалога, мне просто нужно было искать .x-panel: input, так как это то, что уволило событие.

В вашем случае вам просто нужно увидеть, какой самый близкий элемент для CKEditor. Таким образом, вам не нужно будет использовать какой-либо способ обхода, и вы можете просто установить для модального варианта диалога значение true. Причина, по которой вы не хотите этого делать, - это показать другой диалог поверх этого. Вы оверлейки могут быть заказаны неправильно или добавлены к неправильному элементу. В пользовательском интерфейсе диалога уже есть код для его обработки.

Выполняя $.widget( 'ui.dialog', $.ui.dialog, function() {}); он применим ко всему диалогу ui для нашего сайта.

Рабочая демонстрация jsFiddle

Контрольные точки:

jQuery Dialog UI _allowInteraction

jQuery UI Widget factory

Ответ 2

Да, jQueryUI modal предотвращает взаимодействие с внешним диалогом jQuery. Зарегистрируйте это перед созданием диалогового окна пользовательского интерфейса jQuery:

// Prevent jQuery UI modal from disabling ckeditor dialog inputs
// @see http://api.jqueryui.com/dialog/#method-_allowInteraction
$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(event.target).closest(".cke_dialog").length || this._super(event);
    }
});

Источник: http://bugs.jqueryui.com/ticket/9087#comment:14

Ответ 3

Более простое решение, которое работает для меня, взято из другого вопроса SO, который не упоминает CKE, но касается создания модального немодального: fooobar.com/info/407463/...

Просто запустите это после открытия модальности:

$(document).off('focusin.bs.modal');

И диалог ckeditor будет работать нормально