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

I Built a New Kind of Number Puzzle Game (And You Can Play It Free)

 For a long time, I wanted to play a mobile puzzle game that felt genuinely strategic—something that required real brainpower, skipped the a...