Bootstrap с CKEditor равен проблемам

Ответ 1

FWIW, я не мог получить решение Peter для работы, но следующее работало для меня и все еще держит взломанный файл в отдельном файле, чтобы вы не необходимо отредактировать исходные файлы Bootstrap:

// bootstrap-ckeditor-modal-fix.js
// hack to fix ckeditor/bootstrap compatiability bug when ckeditor appears in a bootstrap modal dialog
//
// Include this AFTER both bootstrap and ckeditor are loaded.

$.fn.modal.Constructor.prototype.enforceFocus = function() {
  modal_this = this
  $(document).on('focusin.modal', function (e) {
    if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
      modal_this.$element.focus()
    }
  })
};

Ответ 2

Я просто удалил атрибут tabindex из модального контейнера, который, похоже, исправил эту проблему для меня.

Здесь было предложено жир: https://github.com/twbs/bootstrap/issues/6996

Ответ 3

Вместо того, чтобы возиться с источником Bootstrap, я снова привязал обработчик события фокуса.

Я просмотрел код Bootstrap Modal (unminified), чтобы найти, где определяется обработчик события, в Modal.enforceFocus():

var that = this
$(document).on('focusin.modal', function (e) {
  if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
    that.$element.focus()
  }
})

Затем я добавил метод CKEditor, в котором была изменена эта функция. Вы можете поместить это где угодно; возможно, в файле только для переопределения CKEditor.

CKEDITOR.bootstrapModalFix = function (modal, $) {
  modal.on('shown', function () {
    var that = $(this).data('modal');
    $(document)
      .off('focusin.modal')
      .on('focusin.modal', function (e) {
        // Add this line
        if( e.target.className && e.target.className.indexOf('cke_') == 0 ) return;

        // Original
        if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
          that.$element.focus()
        }
      });
  });
};

Итак, если я знаю, что собираюсь загрузить CKEditor в модальном модуле Bootstrap, я вызываю этот метод, предполагая, что jQuery - $:

CKEDITOR.bootstrapModalFix( $('#myModal'), $ )

Ответ 4

Эй, у меня были эти проблемы. Я нашел этот билет https://github.com/twitter/bootstrap/issues/6996, который, по-видимому, исправил вопрос о том, что входные данные не поддаются выбору. Я добавил изменение в этом билете:

if (that.$element[0] !== e.target && !that.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')){

Это позволяет выбирать как подходящие, так и входные данные, хотя повторение селектора немного дьявола, он исправляет ошибки. Надеюсь, это поможет вам.

Ответ 5

Z-индекс модальности bootstrap выше, чем у панелей ckeditor. Поэтому альтернативным решением, которое я нашел, было увеличение z-индекса для ckeditor. Добавьте следующую строку в ckeditor config.js

// app/assets/javascripts/ckeditor/config.js
config.baseFloatZIndex = 1E5;

Ответ 6

Рабочий пример: http://jsfiddle.net/pvkovalev/4PACy/

        $.fn.modal.Constructor.prototype.enforceFocus = function () {
            modal_this = this
            $(document).on('focusin.modal', function (e) {
                if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
                // add whatever conditions you need here:
                &&
                !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
                    modal_this.$element.focus()
                }
            })
        };

Ответ 7

Bootstrap изменил focusin.modal на показанный .bs.modal

 $.fn.modal.Constructor.prototype.enforceFocus = function() {
  modal_this = this
  $(document).on('shown.bs.modal', function (e) {
    if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
    && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
      modal_this.$element.focus()
    }
  })
};

Это работает для меня.

Ответ 8

Если все вышеупомянутые решения не будут работать для вас, попробуйте следующее:

   $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });

Это сработало для меня мгновенно. Вот источник: tobiv answer - github