How to use CKEditor in a Bootstrap Modal?

Question

If I use the CKEditor plugin in an HTML page based on a Bootstrap template, it works great, however if I insert the editor on a Bootstrap Modal like this

<         


        

Answer 1

I was getting Uncaught TypeError: Cannot read property 'fn' of undefined

So I just replaced the $ inside the script provided by @Pavel Kovalev above to jQuery.

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