Sunday, October 25, 2020

How to use CKEditor in a Bootstrap Modal

 I used CKEditor inside html and it worked fine, but when I use it inside bootstrap modal some features won't work correctly. Specially image resizing not working properly. 

Here how I solved this with this work around. Place this inside $(document).ready block. 

$.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()
        }
    })
};

No comments:

Post a Comment

How to Create Events Using Microsoft Graph API with Delegated Permissions and MSAL.js

Microsoft Graph API provides powerful capabilities to interact with Microsoft 365 services. In this guide, we’ll explore how to create calen...