CKEditor embed Image, Video, link and many others not working in Modal

Question

Hello I am using bootstrap modal popup to open ckeditor. It's working but when I to click the image, video link and any others icon in that dialog opens, but is not clickable. I found this JS fix but it doesn't seem to work with Bootstrap 4.

<script>
    CKEDITOR.replace('help_ldesc');
    //CKEDITOR.replace('help_ldesc1');

    $.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 && $(e.target).parentsUntil('*[role="dialog"]').length === 0) {
                        $modalElement.focus();
                }
        });
};
</script>

Demo: https://jsfiddle.net/waraywarayako/swxr110h/

From this topic: CKEditor image dialog forms not clickable when in a modal dialog

Make a codepen or jsfiddle replicating the problem. Please define the problem here as well as "it's not working" doesn't help much! — Alex
jsfiddle.net/q3xbw8o7 done sir.. the embed link,images and video is the one that not working — Clinton Canarias
Seems to be working with bootstrap 3.1. something must have changed with bootstrap 4 that makes it fail. can't help further :( — Alex

Alex Alex · Accepted Answer · 2017-12-13T22:38:10

So after finding out that this fix (https://gist.github.com/kaddopur/9996231) worked in Bs 3.1.1 I compared the functions between 3.1.1 and the new v4. The enforceFocus function was changed to _enforceFocus. Changing it seems to have fixed the issue:

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

https://jsfiddle.net/q3xbw8o7/7/

CKEditor embed Image, Video, link and many others not working in Modal

1 Answers