رفع مشکل استفاده از CKEditor در modal بوت استرپ

۱۶ آذر ۱۳۹۵

 اگر بخواهیم از ویراشگر متن CK Editor در یک Bootstrap Modal استفاده کنیم، از آنجایی که خود CK Editor نیز برای کارهایی نظیر درج لینک یا تصویر و... از یک modal استفاده می‌کند؛ برای همین دچار conflict می‌شویم و دیگر تمای inputهای فرم‌های درج لینک، تصویر disable خواهند شد.



برای رفع این مشکل باید از اسکریپت زیر کمک بگیریم:


<script>
$.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
            &&
            !$parent.hasClass('cke_dialog_ui_input_select') && !$parent.hasClass('cke_dialog_ui_input_text')) {
            $modalElement.focus()
        }
    })
};
</script>

با استفاده از اسکریپت فوق دیگر conflict پیش آمده حل شده و تمام inputهای modal داخلی CKEditor به صورت عادی قابل استفاده خواهند بود.

هیچ نظری موجود نیست: