La boîte de dialog ckeditor et jquery UI ne fonctionne pas

J’ai essayé sans relâche maintenant de résoudre cette situation frustrante que je rencontrais depuis le début. J’essaie de faire fonctionner ckEditor dans une boîte de dialog jQuery UI. L’éditeur est parfaitement inclus et remplace la zone de texte par l’enveloppe de ckeditor, mais je ne parviens pas à modifier / append du contenu dans le bloc de contenu. La seule solution de travail que j’ai vue à présent est que si je clique sur “Code source” dans l’éditeur et le désélectionne, je peux y append du contenu.

Mon implémentation était purement et je n’ai ajouté aucune information / code supplémentaire. Des idées?

Avait le même problème,

supprimer les effets de modal a aidé: Supprimé:

 show: "scale", hide: "puff", 

Maintenant, mon appel ressemble à ceci:

 $("#report").dialog({ title: "", bgiframe: true, autoOpen: false, width: 990, height: 620, modal: true, draggable: true, resizable: true, resizeStop: function(event, ui) { var y = $(event.target).height(); repEditor.resize( "99%", y - 10 ); }, buttons: { 'Close': function() { $(this).dialog('close'); } } }); 

Pour les versions de jQuery-UI (1.10+), jQuery (1.10+) et CKEditor 3.6, cette solution semble fonctionner:

 _moveToTop: function( event, silent ) { var $parent = this.uiDialog.parent(); var $elementsOnSameLevel = $parent.children(); var heighestZIndex = 0; $.each($elementsOnSameLevel, function(index, element) { var zIndexOfElement = $(element).css('z-index'); if (zIndexOfElement) { var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0; if (zIndexOfElementAsNumber > heighestZIndex) { heighestZIndex = zIndexOfElementAsNumber; } } }); var currentZIndex = this.uiDialog.css('z-index'); var moved; if (currentZIndex >= heighestZIndex) { moved = false; } else { this.uiDialog.css('z-index', heighestZIndex + 1); moved = true; } if ( moved && !silent ) { this._sortinggger( "focus", event ); } return moved; } 

Vous pouvez modifier le fichier en ligne (non recommandé) ou simplement remplacer la fonctionnalité jQuery-UI par défaut dans un fichier JS distinct chargé après jQuery-UI, mais avant la création de la boîte de dialog.

 $.widget("ui.dialog", $.ui.dialog, { _moveToTop: function( event, silent ) { //Logic from above } }); 

Au lieu de conserver l’animation “show” & “hide”, créez votre instance d’éditeur après la fin de l’événement “show” avec une fonction de rappel pour l’option complete: de “show”

 $("#report").dialog({ title: "", bgiframe: true, autoOpen: false, width: 990, height: 620, modal: true, // start my suggestion show: { effect: "scale", complete: function() { $( "#selector" ).ckeditor(); } }, hide: "puff", // end my suggestion draggable: true, resizable: true, resizeStop: function(event, ui) { var y = $(event.target).height(); repEditor.resize( "99%", y - 10 ); }, buttons: { 'Close': function() { $(this).dialog('close'); } } });