jQuery modal dialog and CKEditor input dialog

Question

SOLUTION UPDATE

After spending sometime searching, I think I can make a workaround of this. For me, the only feature of using a modal dialog is that it prevent access from elements behind it. I figure out that its just as same as using non-modal dialog with overlay behind it. The overlay just did the trick of being a modal dialog (altough its not fully featured modal).

So this is my solution, before I initialize the dialog, I insert a div element before it and give ui-widget-overlay class to the div. Its done using .insertBefore() method. And then, at the dialog 'close' event, I remove that overlay div. The dialog 'modal' option is set to false. By using this solution, CKEditor pop up is working fine, because there only one modal dialog (CKEditor pop up).

Here is the whole code in jsfiddle. Hope this helps.

I'm using jQuery to display a dialog. I set this dialog to modal mode. Inside that dialog I include a textarea, which then will be used with CKEditor. When I show the dialog, the textarea is converted nicely by CKEditor. But when try to include an image (CKEditor displays ITS OWN DIALOG for the input), I cannot use the URL input.

This is my code for init the dialog:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: true
});

With that configuration, I can't click the textbox and type.

And then I figure out, that if I set the modal to false, then it should work.

This is the code:

var $dialogJurnal = $("#dialog").dialog({
    autoOpen: false,
    height: 630,
    width: 'auto',
    maxHeight: 630,
    resize: 'auto',
    modal: false
});

With that code, everything is normal, I can click to textbox and type.

Because I need to enable the modal mode, then this become my problem. I think its because the z-index from jQuery dialog (or similar to that) that blocks the CKEditor input dialog. Is there any one can help me?

Recently there was an [issue in jQueryUI](http://bugs.jqueryui.com/ticket/9087) that was causing similar input blocking and I see that they fixed it, but I'm not sure if this patch is included in latest release. — Reinmar, Mar 11 '13 at 20:52
Can verify this fix worked for me as well. jqueryUI 1.10.3, CKEditor 4.3.4 — coop, Apr 10 '14 at 16:42
Use script and instructions from this answer. Definitely helps! http://stackoverflow.com/questions/22637455/how-to-use-ckeditor-in-a-bootstrap-modal — Akima, Apr 16 '15 at 10:57

dklingman · Answer 1 · 2014-04-26T14:51:30.577

Recently, (just this pass week), I was running into a similar problem. I was going to do exactly what you did in the jsfiddle you provided. However, after some research and playing around with what happens in the dialog UI code and what was going on with the markup in the page I finally understood what I needed to do.

It's all about the widget factory and the _allowInteraction function.

For me I was using the Sencha ExtJs grid with filter in a jQuery dialog. The grid worked fine, but the filters, (the textbox filter), just wouldn't work. This was because when the filters are displayed they are outside of the dialog div, or the .ui-dialog tag.

If you dig down into the dialog UI code in the _allowInteraction function it does the following.

//From the jQuery dialog UI
_allowInteraction: function(event) {
    if($(event.target).closest('.ui-dialog').length) {
        return true;
    }

    // TODO: Remove hack when datepicker implements
    // the .ui-front logic (#8989)
    return !!$( event.target ).closest(".ui-datepicker").length;
}

All I needed to do was add a javascript file after my jQuery UI file with the following code:

$.widget('ui.dialog', $.ui.dialog, {
    _allowInteraction: function( event ) {
        //This overrides the jQuery Dialog UI _allowInteraction to handle the sencha
        //extjs filter's not working.
        //this._super(event) passes onto the base jQuery UI
        return !!$( event.target ).closest( ".x-panel :input" ).length || this._super( event );
    }
}

Since the _allowInteraction fire whenever focus is lost from the dialog, I just needed to look for .x-panel :input, since this is what fired off the event.

In your case, you'd just need to see what the closest element is for the CKEditor. This way you wouldn't need to do any type of workaround and you can just simply set the dialog's modal option to true. The reason you don't want to do this is if you were to display another dialog on top of that one. You're overlays could be ordered wrong or appended to the wrong element. The dialog UI already has code to handle that.

By doing the $.widget('ui.dialog', $.ui.dialog, function(){}); it's applied to all the ui dialog's for our site.

Working jsFiddle Demo

Points of reference:

jQuery Dialog UI _allowInteraction

jQuery UI Widget Factory

The jsFiddle Demo for this does not work. For example, I'm unable to add a link. Access to the modal dialog box to add the link is prevented. I am using Firefox 36.0.4. I managed to sort this problem by using $.ui.dialog.prototype._allowInteraction. However, I am getting a lot of 'Too much recursion' errors. — Stevio, Mar 25 '15 at 17:11
I'll need to look at this once I'm at home as we do not have Firefox on our dev machines where I work. As we don't support firefox only IE, Chrome and Safari. Don't ask! — dklingman, Mar 27 '15 at 19:21
I had a similar issue with a popup shown by CLEditor (not CK), thanks to your answer I solved the problem simply adding the ui-dialog class to the element that contained the uneditable textarea. — Andrea Mauro, Oct 08 '19 at 14:18

score 0 · Answer 2 · answered Jan 07 '15 at 12:39

Yes, jQueryUI's modal is preventing anything outside the jQuery dialog to be interacted with. Register this before creating your jQuery UI dialog:

// Prevent jQuery UI modal from disabling ckeditor dialog inputs
// @see http://api.jqueryui.com/dialog/#method-_allowInteraction
$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(event.target).closest(".cke_dialog").length || this._super(event);
    }
});

Source: http://bugs.jqueryui.com/ticket/9087#comment:14

score 0 · Answer 3 · answered Nov 18 '17 at 10:52

A simpler solution that works for me is taken from another SO question that does not mention CKE, but is about making a modal non-modal: https://stackoverflow.com/a/28101676/4050940

Just run this after the modal is opened:

$(document).off('focusin.bs.modal');

And the ckeditor dialog will work fine

score 0 · Answer 4 · answered May 02 '18 at 09:21

This alternative works for me:

//Create the dialog
$("#myDialog").dialog({
 modal: true
});

//Fix problem with ckeditor dialogs
 $.ui.dialog.prototype._allowInteraction = function(event) {
  return true;
 };

Source almost at the end here: https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

score 0 · Answer 5 · answered Dec 05 '18 at 12:30

I had the same problem with using CKEditor in a modal, although I wasn't creating the modal with jQuery.

I tried several solutions found across the internet, but only this one solved the problem for me

$.fn.modal.Constructor.prototype._enforceFocus = function() {
            var $modalElement = this.$element;
            $(document).on('focusin.modal',function(e) {
                if ($modalElement[0] !== e.target
                    && !$modalElement.has(e.target).length
                    && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
                    $modalElement.focus();
                }
            });
        };

from https://stackoverflow.com/a/43104663/10236810

jQuery modal dialog and CKEditor input dialog

SOLUTION UPDATE

5 Answers5