Dialog: CKEditor in Modal Dialog is not editable

The z-index solution may actually be all we need and we could drop the existing dialog ancestor check.

Hey lisaj,

I have this problem too.

I don`t understand how did you solve it.

Could you please help me with this section?

Almog Baku.

if you can, please send me mail:

almog.baku@gmail.com

Replying to [comment:2 AlmogBaku]:

Hey lisaj, I have this problem too. I don`t understand how did you solve it. Could you please help me with this section? Almog Baku. if you can, please send me mail: almog.baku@gmail.com

** and I dont understand where do you locate this code? in the dialog? in some file?..

i got it!

i attach a standalone patch of this soulution.

Patch dialog-patch.js fix problem in Firefox (tested in 3.5.5), but not in Google Chrome (4.0.222.5).

Replying to [comment:5 jupeter]:

Patch dialog-patch.js fix problem in Firefox (tested in 3.5.5), but not in Google Chrome (4.0.222.5).

sorry, my mistake - work in Google Chrome too :)

Replying to [ticket:4727 lisaj]:

Create ckeditor in jquery ui modal dialog an open dialog from ckeditor couse dialog from ckeditor cna not by editable. I fix it with code in attachment. Sry my english.

I met the same issue, but did not find the patched attachment as you said.

Replying to [comment:7 Lucky]:

Replying to [ticket:4727 lisaj]: > Create ckeditor in jquery ui modal dialog an open dialog from ckeditor couse dialog from ckeditor cna not by editable. > I fix it with code in attachment. > Sry my english. > I met the same issue, but did not find the patched attachment as you said.

I searched with google and found this patch js file and tried inside my codes, but it does not help to solve this problem, and I also found that, after I switched with "Source", then it works, so I changed to setData(" ") before edit. by this, yes, it works now.

#6998 is a duplicate of this ticket.

So is there a fix for this? I don't see an attachment and I'm not sure what code the last post is referring to. Thanks

http://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog Provides more detail

Seems like a valid issue even in latest jQuery UI 1.9 and latest CKEditor downloaded today. However, it's not clear who is at fault. I'll let a core jQuery UI dev team member investigate further.

dcarrith or lisaj or anyone else: Can someone please provide a reduced test case showing the problem? I just download CKEditor and put it inside a modal dialog using jQuery UI 1.9.0 and didn't have any problems.

I had this problem and have been using the patch mentioned in this ticket. After reading Scott's latest comment, I removed the patch and no longer see the problem. I've also recently switched to jQuery UI 1.9 and the latest ckeditor, so I couldn't tell you how long it's been fixed for or exactly which update it was.

mblaney, thanks for the update! What version of jQuery are you using? 1.8.2? I'm curious to know if there is a combo of CKEditor + jQuery UI + jQuery that works properly for everyone else in this thread, so we can close the loop on this issue.

yeah jQuery 1.8.2, jQuery UI 1.9.0 and CKEditor 3.6.4

I just removed the patch from an older install of my software to replicate the problem, and it was still present with versions: jQuery 1.4.2, jQuery UI 1.8.2 and CKEditor 3.3. As you can guess I'm not overly keen on rolling through my commits since then to discover the change that fixed it :-)

Thanks, that's definitely helpful; we can track it down from here.

CKEditor 3.6.4+ works with old versions of jQuery UI and all versions of CKEditor (only tested back to 3.3) work with jQuery UI Git thanks to 3829a37ca122e923c3a08b964c4b1a946a2a1456.

Closing fixed in 1.10.0 since the old CKEditor problem is actually being fixed by us.

I had a workaround that worked in jQuery UI 1.9.2 to set the zIndex to -1 on the dialog. As far as I can tell this doesn't work with jQuery UI 1.10.0 and CKEditor 4.0.1. I had to downgrade to jQuery UI 1.9.2 again. I'm not sure what was fixed in 1.10.0? Because I can't edit any text fields in the CKEditor dialogs still. I've tested in Chrome and Firefox.

Replying to [comment:22 smallred]:

I had a workaround that worked in jQuery UI 1.9.2 to set the zIndex to -1 on the dialog. As far as I can tell this doesn't work with jQuery UI 1.10.0 and CKEditor 4.0.1. I had to downgrade to jQuery UI 1.9.2 again. I'm not sure what was fixed in 1.10.0? Because I can't edit any text fields in the CKEditor dialogs still. I've tested in Chrome and Firefox.

See #9087. We're looking into this.

Solution is pretty simple. If you use fadeIn(for example 300ms) to show the dialog, just make some delay (using setTimeout) after fading and then replace textarea by CKEditor.

example:

$("selector").dialog({
//parameters
}).fadeIn(300);
setTimeout(function(){CKEDITOR.replace('ckedt-hiddenForms')},350);

Solution works for me fine in Chrome and Internet Explorer. On Mozilla and Opera that problem didn't exist for me...

Replying to [comment:23 tj.vantoll]:

Replying to [comment:22 smallred]: > I had a workaround that worked in jQuery UI 1.9.2 to set the zIndex to -1 on the dialog. As far as I can tell this doesn't work with jQuery UI 1.10.0 and CKEditor 4.0.1. I had to downgrade to jQuery UI 1.9.2 again. I'm not sure what was fixed in 1.10.0? Because I can't edit any text fields in the CKEditor dialogs still. I've tested in Chrome and Firefox. See #9087. We're looking into this.

I got it to work using the following code before I create the dialog:

http://bugs.jqueryui.com/ticket/9087

$.widget("ui.dialog", $.ui.dialog, {
	_allowInteraction: function(event) {
		return !!$(event.target).closest(".cke").length || this._super(event);
	}
});

I'm not sure I totally understand the code posted with 9087 (some more documentation or examples would be nice), but it seems to work fine for me now. I am using jQuery 1.9.1 with jQuery UI 1.10.2 (required for this fix to work).