Opened 10 years ago

Closed 7 years ago

Last modified 7 years ago

#4727 closed bug (fixed)

Dialog: CKEditor in Modal Dialog is not editable

Reported by: lisaj Owned by: lisaj
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.7.2
Keywords: modal Cc:
Blocked by: Blocking:

Description

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.

Attachments (2)

code.txt (2.2 KB) - added by lisaj 10 years ago.
dialog-patch.js (1.7 KB) - added by AlmogBaku 10 years ago.
standalone patch for jquery-dialog & ckeditor

Download all attachments as: .zip

Change History (27)

Changed 10 years ago by lisaj

Attachment: code.txt added

comment:1 Changed 10 years ago by Scott González

Milestone: TBD1.8

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

comment:2 Changed 10 years ago by 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@…

comment:3 in reply to:  2 Changed 10 years ago by 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: almog.baku@…

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

Changed 10 years ago by AlmogBaku

Attachment: dialog-patch.js added

standalone patch for jquery-dialog & ckeditor

comment:4 Changed 10 years ago by AlmogBaku

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

comment:5 Changed 10 years ago by jupeter

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

comment:6 in reply to:  5 Changed 10 years ago by 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 :)

comment:7 in reply to:  description ; Changed 9 years ago by 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.

comment:8 in reply to:  7 Changed 9 years ago by 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.

comment:9 Changed 9 years ago by Scott González

#6998 is a duplicate of this ticket.

comment:10 Changed 9 years ago by 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

comment:12 Changed 8 years ago by Scott González

Keywords: modal added

comment:13 Changed 7 years ago by Scott González

Milestone: 1.9.01.10.0

comment:14 Changed 7 years ago by dcarrith

Summary: In modal dialog con not edit dialog CKEditorDialog: CKEditor in Modal Dialog is not editable

comment:15 Changed 7 years ago by dcarrith

Status: newopen

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.

comment:16 Changed 7 years ago by Scott González

Owner: set to lisaj
Status: openpending

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.

comment:17 Changed 7 years ago by 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.

comment:18 Changed 7 years ago by 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.

comment:19 Changed 7 years ago by 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 :-)

comment:20 Changed 7 years ago by Scott González

Status: pendingopen

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

comment:21 Changed 7 years ago by Scott González

Resolution: fixed
Status: openclosed

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.

comment:22 Changed 7 years ago by 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.

Last edited 7 years ago by smallred (previous) (diff)

comment:23 in reply to:  22 ; Changed 7 years ago by 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.

comment:24 Changed 7 years ago by 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...

comment:25 in reply to:  23 Changed 7 years ago by 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.

Version 2, edited 7 years ago by smallred (previous) (next) (diff)
Note: See TracTickets for help on using tickets.