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

TinyMCE Insert/Edit link not editable

 To fix this add  e.stopImmediatePropagation()  as below. $(document).on('focusin', function (e) {             if ($(e.target).close...