求助：将CKEditor在Bootstrap v3模态框的修复适配到Bootstrap v4

我之前也碰到过这个棘手的问题——Bootstrap v4把v3里的enforceFocus方法重命名成了_enforceFocus，导致原来适配v3的修复代码直接失效，模态框总是抢CKEditor的焦点。下面是我亲测有效的修复方案：

核心思路 #

我们需要重写Bootstrap模态框的_enforceFocus方法，让它在检测到焦点处于CKEditor的元素内时，跳过强制聚焦到模态框的逻辑，这样就能让CKEditor正常获取焦点了。

修复代码 #

把这段代码放在Bootstrap和CKEditor都加载完成之后执行（比如DOM就绪的回调里）：

// 先保存Bootstrap模态框原本的_enforceFocus方法
const originalEnforceFocus = $.fn.modal.Constructor.prototype._enforceFocus;

// 重写_enforceFocus方法
$.fn.modal.Constructor.prototype._enforceFocus = function() {
    // 获取当前页面的焦点元素
    const activeElement = document.activeElement;
    
    // 检查焦点元素是否属于CKEditor的容器（.cke是CKEditor的核心容器类）
    if (activeElement && activeElement.closest('.cke')) {
        return; // 如果是CKEditor的元素，直接返回，不执行强制聚焦
    }
    
    // 否则调用原本的_enforceFocus方法，保留Bootstrap的默认行为
    originalEnforceFocus.call(this);
};

使用说明 #

1. 确保这段代码在jQuery、Bootstrap JS、CKEditor都加载完成后运行，比如放在$(document).ready()回调里：

$(document).ready(function() {
    // 上面的修复代码放在这里
});

2. 如果你用的是原生JS而非jQuery，也可以调整代码实现：

document.addEventListener('DOMContentLoaded', function() {
    const originalEnforceFocus = bootstrap.Modal.prototype._enforceFocus;
    bootstrap.Modal.prototype._enforceFocus = function() {
        const activeElement = document.activeElement;
        if (activeElement && activeElement.closest('.cke')) {
            return;
        }
        originalEnforceFocus.call(this);
    };
});

这样修改后，模态框就不会再干扰CKEditor的焦点了，你可以正常在模态框里使用CKEditor编辑内容啦。

内容的提问来源于stack exchange，提问作者esviko