CKEditor4在Bootstrap5模态框中输入框无法正常使用求助

Bootstrap5模态框的focusin事件拦截机制会导致CKEditor弹窗（如链接插入窗口）内的输入框无法获取焦点，即使移除tabindex属性也可能无法解决。以下是两种实用修复方案：

方案一：针对CKEditor弹窗单独处理 #

通过监听CKEditor的弹窗显示事件，手动解除输入框的焦点拦截：

// 移除模态框的tabindex避免焦点锁定
$(document).on('show.bs.modal', function (e) {
  $(e.target).removeAttr('tabindex');
});

// 修复CKEditor弹窗输入框焦点问题
CKEDITOR.on('instanceReady', function (evt) {
  evt.editor.on('dialogShow', function (dialogEvt) {
    const dialog = dialogEvt.data;
    // 处理链接URL输入框
    dialog.getContentElement('info', 'url').getInputElement().on('focus', function() {
      $(this).off('focusin');
    });
    // 处理链接文本输入框（如果需要）
    dialog.getContentElement('info', 'text').getInputElement().on('focus', function() {
      $(this).off('focusin');
    });
  });
});

方案二：全局禁用Bootstrap模态框焦点锁定 #

直接覆盖Bootstrap模态框的焦点强制管理方法，彻底解决焦点冲突：

// 全局关闭Bootstrap模态框的自动焦点锁定
$.fn.modal.Constructor.prototype._enforceFocus = function() {};

注意：此方法会关闭所有Bootstrap模态框的焦点锁定功能，若你的项目依赖模态框的焦点行为，建议优先使用方案一。

额外排查点 #

• 确保使用的是CKEditor4最新稳定版，旧版本可能存在Bootstrap5兼容性问题
• 检查页面是否存在其他自定义焦点事件监听，避免与Bootstrap或CKEditor冲突

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