jQuery dialogue modale et entrée CKEditor dialogue

Question

SOLUTION MISE À JOUR

Après avoir passé quelque temps la recherche, je pense que je peux faire une solution de contournement de cela. Pour moi, la seule caractéristique de l'utilisation d'un dialogue modal est qu'il empêche l'accès des éléments derrière lui. Je me rends compte que c'est tout de même que d'utiliser un dialogue non-modal avec une superposition derrière. La superposition a juste fait l'affaire d'être un dialogue modal (bien que son modal n'est pas complet).

Donc, ceci est ma solution, avant d'initialiser la boîte de dialogue, j'insère un élément div avant cela et donne ui-widget-overlay classe à la div. C'est fait en utilisant la méthode .insertBefore(). Et puis, à l'événement de dialogue 'fermer', je supprime ce div superposition. L'option de dialogue 'modal' est définie sur false. En utilisant cette solution, CKEditor pop up fonctionne bien, car il n'y a qu'une seule boîte de dialogue modale (pop up CKEditor).

Voici l'intégralité du code jsfiddle. J'espère que cela t'aides.

---

---

J'utilise jQuery pour afficher une boîte de dialogue. Je définis cette boîte de dialogue sur le mode modal. Dans cette boîte de dialogue, j'insère une zone de texte, qui sera ensuite utilisée avec CKEditor. Quand je montre le dialogue, la zone de texte est bien convertie par CKEditor. Mais quand essayer d'inclure une image (CKEditor affiche son propre dialogue pour l'entrée), je ne peux pas utiliser l'entrée URL.

Ceci est mon code pour la boîte de dialogue d'initialisation:

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

Avec cette configuration, je ne peux pas cliquer la zone de texte et le type.

---

Et puis-je savoir que si je mets le modal false, alors il devrait fonctionner.

Voici le code:

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

Avec ce code, tout est normal, je peux cliquer pour textBox et le type.

---

Parce que je dois activer le mode modal, cela devient mon problème. Je pense que c'est parce que le z-index de la boîte de dialogue jQuery (ou similaire à cela) qui bloque la boîte de dialogue de saisie CKEditor. Est-ce que quelqu'un peut m'aider?

Answer 1

Récemment, (juste cette semaine de passe), je rencontrais un problème similaire. J'allais faire exactement ce que vous avez fait dans le jsfiddle que vous avez fourni. Cependant, après quelques recherches et en jouant avec ce qui se passe dans le code de l'interface de dialogue et ce qui se passait avec le balisage dans la page, j'ai finalement compris ce que je devais faire.

Il est tout au sujet de l'usine widget et la fonction _allowInteraction. Pour moi, j'utilisais la grille Sencha ExtJs avec filtre dans une boîte de dialogue jQuery.La grille fonctionnait correctement, mais les filtres (le filtre de zone de texte) ne fonctionnaient pas. En effet, lorsque les filtres sont affichés, ils sont en dehors de la div de dialogue ou de la balise de dialogue .ui.

Si vous creusez dans le code de l'interface utilisateur de la boîte de dialogue dans la fonction _allowInteraction, il effectue les opérations suivantes.

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

Tout ce que je devais faire était d'ajouter un fichier javascript après mon fichier jQuery UI avec le code suivant:

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

Depuis le _allowInteraction feu chaque fois mise au point est perdu de la boîte de dialogue, je viens besoin de chercher .x-panel: input, puisque c'est ce qui a déclenché l'événement.

Dans votre cas, vous devez juste voir quel est l'élément le plus proche du CKEditor. De cette façon, vous n'auriez pas besoin de faire n'importe quel type de solution de contournement et vous pouvez simplement définir l'option modale de la boîte de dialogue sur true. La raison pour laquelle vous ne voulez pas faire cela est si vous deviez afficher une autre boîte de dialogue en plus de celle-ci. Vos superpositions peuvent être mal classées ou ajoutées au mauvais élément. L'interface de dialogue a déjà du code pour gérer cela. En faisant $ .widget ('ui.dialog', $ .ui.dialog, function() {}); il est appliqué à tous les dialogues ui pour notre site.

Working jsFiddle Demo

Points de référence:

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory

Answer 2

Oui, le modal jQueryUI est d'empêcher quoi que ce soit en dehors de la boîte de dialogue jQuery pour interagir. Enregistrez-vous cette avant de créer votre boîte de dialogue jQuery UI:

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

Source: http://bugs.jqueryui.com/ticket/9087#comment:14

Answer 3

Une solution plus simple qui fonctionne pour moi est tiré d'une autre question SO qui ne mentionne pas CKE, mais est de faire un non modal modal: https://stackoverflow.com/a/28101676/4050940

Il suffit de lancer ce après le modal est ouvert:

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

Et la boîte de dialogue ckeditor fonctionnera