[廚餘回收] Bootstrap Modal 裡面的 CKEditor 無法在跳出來的功能視窗輸入文字

一開始是在 CKEdtior 中要新增超連結時發現的,當 CKEditor 是放在 Bootstrap 的 Modal 中時,只要是按 CKEditor 上的功能按鈕跳出來的視窗,都無法輸入文字。

這個問題的原因主要是 CKEditor 跳出來的功能視窗沒有被 focus,focus 一直停留在 Bootstrap 的 Modal 上,拜一下 Google 大神之後找到了解法,在 jQuery 載入後執行下面這段程式碼,多加判斷讓 focus 能夠留在 CKEditor 跳出來的功能視窗上。

$.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();
            }
        });
};

感謝在世界上無私的大大!

參考資料

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學