CODEWITHSUNDEEP
twitter-bootstrapckeditor
Eman
Eman

Reputation: 1315

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.

Upvotes: 3

Views: 1948

Answers (4)

Jhon
Jhon

Reputation: 1

resolve in global css, work in angular and react

.ck.ck-reset_all, .ck.ck-reset_all * {
    border-collapse: collapse;
    font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
    color: var(--ck-color-text);
    text-align: left;
    white-space: nowrap;
    cursor: auto;
    float: none;
    z-index: 9999999999999999 !important;
}

Upvotes: 0

Maneesh Tiwari
Maneesh Tiwari

Reputation: 51

Just Remove: tabindex="-1"

And Add: data-bs-focus="false"

I hope your Problem Solved :)

Upvotes: 0

Gudradain
Gudradain

Reputation: 4753

Just remove the tabindex="-1" from this line in your bootstrap modal.

<div class="modal fade" tabindex="-1" role="dialog">

Source

Note

Beware of accepted answer as it could make your browser crash.

If you open a modal from another modal, the accepted answer will create an infinite loop that will make the entire page crash.

Upvotes: 3

Marco Caltagirone
Marco Caltagirone

Reputation: 1206

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>

Upvotes: 1

Related Questions