javascriptjqueryhtmlcssckeditor

CKEditor 5 popup controls not working in Bootstrap 3 - 2018

The problem I'm having seems similar to this: How to use CKEditor in a Bootstrap Modal? but the accepted answer does not work with the following:

I have created a fiddle to show the issue: http://jsfiddle.net/fg3va7zq/2/

If you click "Launch modal" it will open the modal. When trying to insert a link I get this:

enter image description here

I cannot click inside the input to insert a link.

The following CSS was used to make sure the z-index of the link input is above the modal:

.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
    z-index: 10055 !important;
}

This works, and without it the link box isn't even visible.

The following js was provided on the linked answer:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length
            // add whatever conditions you need here:
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};

This does not fix the issue, as demonstrated on the updated fiddle: http://jsfiddle.net/fg3va7zq/3/

Does anyone know how to fix this? The other SO posts (most of which are several years old) on this subject do not fix the issue so I have opened it as a new question.

Solution

  • UPDATE 2024 (2025?)

    While this answer might be correct, it seems other answers are more up to date with better and nicer fixes. I strongly suggest checking them out first, specifically this answer.

    see updates for full details

    Well, I was surprised I found the solution to this issue, but I have no idea how or why this is working so please don't ask me or i'll have to look for an actual answer to the why part. (Answer to the 'Why?' is below)

    Simply remove the $modalElement.focus() from the function added, take a note, you CANNOT remove the whole function as it won't work if you do, you need to leave it that way and only remove the .focus() part.

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            
        }
    })
};

    You can see its working in this fiddle: http://jsfiddle.net/fg3va7zq/4/

    As I said, I have no idea why it works or if it might break something else, but its working :)

    UPDATE

    Why it works?

    It didn't work because when you clicked inside the model, the focus was shifting to the model element it self, so every click on the url element, you were focusing out from the URL element and focusing in the parent model element.

    The actual fix for this would be to focus on the clicked element and NOT on the model it self with e.target.focus(), like this:

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    var $modalElement = this.$element;
    $(document).on('focusin.modal', function (e) {
        var $parent = $(e.target.parentNode);
        if ($modalElement[0] !== e.target && !$modalElement.has(e.target).length &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            e.target.focus()
        }
    })
};

    UPDATE 2

    Why it doesn't work when the whole function removed?

    When you set the prototype you basically override the function bootstrap have by default, the bootstrap function is basically focusing on model when something is clicked, which is what the first function you set was doing.

    So when you were overriding the function with a function that does nothing, well, it did nothing (it didn't focus on the model and stayed focused on the clicked element)