Bootstrap avec CKEditor est égal à des problèmes

donc maintenant je suis en train de créer un Bootstrap modal qui contient une instance de CKEditor, mais il y a beaucoup de problèmes...

Donc, fondamentalement, les champs sont laissés en unenabled, qu'ils ne ressemblent pas, mais je ne peux pas interagir avec eux. Quelqu'un at-il une solution à ce comportement étrange?

Merci

source d'informationauteur Miguel P

FWIW, je ne pouvais pas obtenir Pierre de la solution à travailler, mais la suite a fonctionné pour moi, et garde toujours le hack dans un fichier séparé, de sorte que vous n'avez pas à modifier tout de Bootstrap, fichiers source:

//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()
    }
  })
};

11

J'ai juste enlevé le tabindex attribut de l'modal conteneur, qui semble résoudre ce problème pour moi.

Ceci a été suggéré par graisse ici: https://github.com/twbs/bootstrap/issues/6996

Au lieu de vous embêter avec le Bootstrap de source, j'ai re-joint le focus de gestionnaire d'événements.

J'ai regardé dans le Bootstrap Modal (unminified) code pour trouver l'endroit où le gestionnaire d'événements est en cours de définition, en vertu de l'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()
  }
})

J'ai ensuite ajouté une méthode pour CKEditor que les règlements ultérieurs de cette fonction. Vous pouvez mettre à cette mesure; peut-être dans un fichier juste pour CKEditor remplace.

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()
        }
      });
  });
};

Donc maintenant, si je sais que je vais charger un CKEditor dans une modal Bootstrap, j'appelle cette méthode, en supposant que jQuery est $:

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

1

Hey j'ai eu ces problèmes. J'ai trouvé ce billet https://github.com/twitter/bootstrap/issues/6996 qui semble avoir résolu le problème des entrées en cours ne peut pas être sélectionnée pour moi. J'ai étendu le changement dans ce billet:
```
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')){
```
Cela permet à la choisit pour être utilisable ainsi que les entrées, bien que la répétition de la sélection est un peu janky il n'corriger les bugs. Espérons que cela vous aide.
1

Le z-index de l'amorçage modal est plus élevé que celui de ckeditor panneaux. Donc une solution alternative que j'ai trouvé a été d'augmenter le z-index pour ckeditor. Ajoutez la ligne suivante à ckeditor config.js
```
//app/assets/javascripts/ckeditor/config.js
config.baseFloatZIndex = 1E5;
```

Exemple de travail est ici: 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()
                }
            })
        };

Bootstrap changé focusin.modal affiche.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()
    }
  })
};

C'est de travailler pour moi.

0

Si toutes les solutions ci-dessus ne fonctionne pas pour vous, essayez ceci:
```
   $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });
```
Il a travaillé pour moi instantanément. Voici la source: tobiv réponse - github

Vous devez vous connecter pour publier un commentaire.