Search code examples
twitter-bootstrapckeditor

CKEditor 4 - Link dialog doesn't work when in twitter bootstrap modal


I have an instance of CKEditor in a twitter bootstrap modal, which is working just fine, except for when you try to use a dialog that has a textbox or a dropdown it is not accessible.

I'm wondering if any one else has had such an issue and found a way to make it work.

Thanks

Edit:

I did some digging and found a hack that fixed the issue.


Solution

  • Just put this after Bootstrap script and all problem will fixed

    <script>
         //The final solution code for all bugs ckeditor in twitter bootstrap3' modal
         $.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>