رفع مشکل استفاده از 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 به صورت عادی قابل استفاده خواهند بود.

برچسب‌ها:،،،،،،
مرتضی اسدی
مرتضی اسدی
سلام! من مرتضی اسدی هستم، یک توسعه‌دهنده‌ی نرم‌افزار و در این وبلاگ دست‌نوشته‌هایم را می‌نویسم.

مطالب مرتبط