Reputation: 3592
I tried endlessly now you resolve this utter frustrating situation I have been having. I am trying to get ckEditor to work within a jQuery UI dialog box. The editor is included perfectly, and it replaces the textarea with the ckeditor skin, but I am unable to edit/add content in the content block. The only working solution I have seen now was if I click on "Source Code" within the editor and unclick it, I am able to add content to it.
My implimentation was purely just <script type='text/javascript' src='ckeditor/ckeditor.js'></script>
and I have not added any additional information / code. Any ideas?
Upvotes: 2
Views: 3674
Reputation: 34021
For versions of jQuery-UI (1.10+) and jQuery (1.10+), and CKEditor 3.6, this solution seems to work:
_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._trigger( "focus", event );
}
return moved;
}
You can either edit the file in-line (not recommended), or just override the default jQuery-UI functionality in a separate JS file that is loaded after jQuery-UI, but before the dialog is created.
$.widget("ui.dialog", $.ui.dialog, {
_moveToTop: function( event, silent ) {
//Logic from above
}
});
Upvotes: 2
Reputation: 31
As an alternative to keep the "show" & "hide" animation, create your editor instance after the "show" event finishes with a callback function for the complete: option of "show"
$("#report").dialog({
title: "<?php echo caption("REPORT_EDITOR"); ?>",
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');
}
}
});
Upvotes: 0
Reputation: 36
Had the same issue,
removing effects from modal helped : Removed :
show: "scale",
hide: "puff",
Now my call looks like this :
$("#report").dialog({
title: "<?php echo caption("REPORT_EDITOR"); ?>",
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');
}
}
});
Upvotes: 2