Bootstrap弹窗中CKEditor4/5的图片与链接按钮无法使用求助

问题根源在于Bootstrap模态框的默认层级（z-index）比CKEditor的内置弹窗高，导致上传/链接对话框被遮挡无法交互；另外模态框的焦点捕获机制也会干扰CKEditor弹窗的正常事件响应。以下针对CKEditor4和CKEditor5分别给出解决办法：

CKEditor4 修复步骤 #

• 提升CKEditor弹窗的层级，确保它能显示在模态框上方：
  在页面样式中添加：

  .cke_dialog {
      z-index: 1060 !important; /* Bootstrap模态框默认z-index为1050，设更高值即可 */
  }
  

• 如果上述方法仍无效，禁用Bootstrap模态框的焦点捕获：
  初始化模态框时加入focus: false配置：

  $('#your-modal-id').modal({
      focus: false
  });
  

CKEditor5 修复步骤 #

CKEditor5的弹窗类名与4不同，需调整对应样式：

• 添加CSS提升弹窗层级：

  .ck-modal {
      z-index: 1060 !important;
  }
  .ck.ck-dropdown__panel {
      z-index: 1060 !important;
  }
  

• 同样禁用模态框的焦点捕获：

  $('#your-modal-id').modal({
      focus: false
  });
  

额外排查点 #

如果是自定义上传按钮无响应，检查是否被模态框的事件冒泡干扰，可给上传按钮添加事件阻止冒泡：

document.querySelector('.ck-button.ck-file-dialog-button').addEventListener('click', function(e) {
    e.stopPropagation();
});

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