How to ensure that ckeditor has focus when displayed inside of jquery-ui dialog widget

问题

I have used CKEDITOR.appendTo( "my_div" , null , my_string ) to create an instance of ckeditor ... no problem.

however, the LINK button opens a non-interactive LINK dialog box.

So, is there some config setting that it supposed to be manually set to true, perhaps?

EDIT 1 ... I will explain what I meant by non-interactive LINK dialog box ...

When I click the ckeditor's LINK button (the one that looks like a chain-link), it opens a LINK dialog box which has a input field for me to enter a URL, plus a pulldown to choose protocol, plus a couple of other form elements.

However, none of these are use-able ... if I try to type in the url input field, nothing happens (the field will not accept focus); likewise the pulldowns do not open if I click them.

EDIT 2 ... added screenshot

回答1:

When the modal option is set to true for the dialog, the dialog blocks any interaction with elements outside of it. (https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js#L818)

You can override this to allow interaction with elements inside ckeditor.

Just include this somewhere after jquery ui and it should work:

orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
  if ($(event.target).closest('.cke_dialog').length) {
    return true;
  }
  return orig_allowInteraction.apply(this, arguments);
};

If you want to allow interaction with any element outside of the dialog, include this instead:

$.ui.dialog.prototype._allowInteraction = function(event) {
  return true;
};

回答2:

Add this:

$(document).on('focusin', function(e) {e.stopImmediatePropagation();});

回答3:

I was using:

jquery-1.8.2
jquery-ui-1.10.3
ckeditor 4.3.1

then I replaced: jquery-ui-1.10.3 with: jquery-ui-1.9.0 and it seems to work as expected.

If reverting back to jquery-ui 1.9 is not good for you, also look at:

jquery-ui forum ... "can't edit fields of CKEditor in jQuery UI modal dialog"
jquery-ui bugs ... "Dialog: CKEditor in Modal Dialog is not editable"

来源：https://stackoverflow.com/questions/20533487/how-to-ensure-that-ckeditor-has-focus-when-displayed-inside-of-jquery-ui-dialog

标签

ckeditor