Bootstrap 5模态框中TinyMCE编辑器子模态框无法输入编辑的问题咨询

我完全懂你的困扰——把TinyMCE放进Bootstrap 5模态框后，它自带的链接模态框里的输入框根本没法编辑，官方的Bootstrap集成方案只适配到Bootstrap 4，确实有点坑。

问题的核心在于Bootstrap 5的焦点陷阱（Focus Trap）机制：为了保证模态框的可访问性，Bootstrap 5会强制把焦点锁定在父模态框内部，而TinyMCE弹出的子模态框（比如链接对话框）不在这个锁定范围内，导致输入元素拿不到焦点，自然无法编辑。

下面给你两个可行的解决方案，按优雅程度排序：

方案一：优雅兼容（推荐） #

通过覆盖Bootstrap模态框的焦点检查逻辑，让它自动忽略TinyMCE的模态框元素。在你现有代码的末尾添加这段JavaScript：

document.addEventListener('shown.bs.modal', function(e) {
  // 获取当前Bootstrap模态框实例
  const modalInstance = bootstrap.Modal.getInstance(e.target);
  // 保存原生的焦点强制方法
  const originalEnforceFocus = modalInstance._enforceFocus;
  
  // 重写焦点强制方法
  modalInstance._enforceFocus = function() {
    const activeElement = document.activeElement;
    // 如果当前焦点在TinyMCE的模态框或辅助元素内，跳过Bootstrap的焦点锁定
    if (activeElement.closest('.tox-tinymce-aux') || activeElement.closest('.tox-dialog')) {
      return;
    }
    // 否则执行原生逻辑
    originalEnforceFocus.call(this);
  };
});

这个方法既保留了Bootstrap模态框的原生焦点行为，又能让TinyMCE的子模态框正常获取焦点，不会有任何副作用。

方案二：快速临时修复 #

如果追求最快解决，可以直接禁用Bootstrap模态框的焦点陷阱功能，不过这会牺牲一点模态框的可访问性（比如无法自动把焦点带到模态框内）。

修改你的模态框元素，添加data-bs-focus="false"属性：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-focus="false">

或者用JavaScript初始化模态框时配置：

const myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
  focus: false
});

验证修改后的完整代码 #

把方案一的代码加到你的现有脚本后面，完整代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/tinymce.min.js" integrity="sha512-RnlQJaTEHoOCt5dUTV0Oi0vOBMI9PjCU7m+VHoJ4xmhuUNcwnB5Iox1es+skLril1C3gHTLbeRepHs1RpSCLoQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/plugins/link/plugin.min.js" integrity="sha512-itGgetRaXe7QX3rkrGYJyUR6heF0LMLMU97a5lpiVRlPESh0xbMkD+7L+ScFuiQf+Wg1PEeKmvmABXvMOUVuxw==" crossorigin="anonymous"></script>

<body>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <textarea></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    tinymce.init({
      selector: 'textarea',
      menubar: false,
      height: '400',
      plugins: 'link',
      toolbar: 'link'
    });

    // 添加这段修复代码
    document.addEventListener('shown.bs.modal', function(e) {
      const modalInstance = bootstrap.Modal.getInstance(e.target);
      const originalEnforceFocus = modalInstance._enforceFocus;
      
      modalInstance._enforceFocus = function() {
        const activeElement = document.activeElement;
        if (activeElement.closest('.tox-tinymce-aux') || activeElement.closest('.tox-dialog')) {
          return;
        }
        originalEnforceFocus.call(this);
      };
    });
  </script>
</body>

修改完成后，再点击TinyMCE的链接按钮，弹出的模态框里的输入框就能正常编辑了。

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