CKEditor4在Bootstrap5模态框中弹窗输入框失效解决方案问询

适配Bootstrap5的解决方案 #

核心原理 #

Bootstrap5 已移除jQuery依赖，原Bootstrap4版本基于$.fn.modal.Constructor的修改方案不再适用，问题根源是Bootstrap5模态框的原生焦点劫持逻辑会拦截CKEditor4弹窗内的输入框焦点，仅需重写对应焦点校验规则即可。

操作步骤 #

1. 重写Bootstrap5 Modal类的焦点强制逻辑
   在页面加载完成后、模态框初始化前插入以下代码：

const originalEnforce = bootstrap.Modal.prototype._enforceFocus;
bootstrap.Modal.prototype._enforceFocus = function () {
  // 若当前焦点在CKEditor弹窗内，直接放行不做焦点拦截
  if (document.activeElement.closest('.cke_dialog')) return;
  // 其余场景保留原有Bootstrap焦点逻辑
  originalEnforce.call(this);
};

若为模块化引入Bootstrap5的场景，需先导入Modal实例再修改原型：

import { Modal } from 'bootstrap'
const originalEnforce = Modal.prototype._enforceFocus
Modal.prototype._enforceFocus = function () {
  if (document.activeElement.closest('.cke_dialog')) return
  originalEnforce.call(this)
}

2. 可选：调整CKEditor4弹窗层级（若出现弹窗被模态框遮挡的情况）
   在CKEditor初始化配置中添加层级规则，保证弹窗优先级高于Bootstrap5模态框（默认模态框z-index为1055）：

CKEDITOR.config.baseFloatZIndex = 1060;

验证 #

修改完成后重新打开模态框调用CKEditor的弹窗功能，文本输入框即可正常输入，原有模态框的焦点管控逻辑不受影响。

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