Dialog: CKEditor in Modal Dialog is not editable

[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.

[Scott González]

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

[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: [email protected]…

[AlmogBaku]

Replying to 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: [email protected]…

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

[AlmogBaku]

standalone patch for jquery-dialog & ckeditor

[AlmogBaku]

i got it! i attach a standalone patch of this soulution.

[jupeter]

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

[jupeter]

Replying to 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 :)

[Lucky]

Replying to 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.

[Lucky]

Replying to Lucky:

Replying to 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.

[Scott González]

#6998 is a duplicate of this ticket.

[Marshals]

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

[Marshals]

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

[dcarrith]

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.

[Scott González]

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.

[Malcolm Blaney]

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.

[mikesherov]

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.

[Malcolm Blaney]

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 :-)

[Scott González]

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

[Scott González]

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.

[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.

[tj.vantoll]

Replying to 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.

[TheCyberd3m0n]

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...

[smallred]

Replying to tj.vantoll:

Replying to 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).