Bootstrap模态框上的TinyMCE代码编辑器无法编辑问题求助

问题原因 #

Bootstrap模态框默认启用焦点陷阱机制，强制焦点始终留在模态框内部；同时TinyMCE代码编辑器弹窗的层级（z-index）低于Bootstrap模态框，导致编辑器无法获取输入焦点，无法进行编辑操作。

解决方案 #

1. 提升TinyMCE代码编辑器弹窗的层级

添加CSS样式，确保代码编辑器弹窗显示在模态框上方：

.tox-tinymce-aux {
  z-index: 1060 !important;
}

2. 临时禁用模态框的焦点陷阱

修改TinyMCE初始化配置，通过setup回调在代码编辑器打开/关闭时处理模态框的焦点陷阱：

tinymce.init({
  selector: '#bodyText',
  height: 300,
  plugins: 'code',
  menubar: 'view',
  setup: function(editor) {
    // 打开代码编辑器时，临时移除模态框的焦点陷阱
    editor.on('CodeEditorOpen', function() {
      const modal = document.getElementById('_bodyModal');
      modal.removeAttribute('data-bs-focus');
      modal.classList.remove('modal');
      // 延迟让代码编辑器文本域获取焦点
      setTimeout(() => {
        document.querySelector('.tox-code-editor textarea').focus();
      }, 100);
    });

    // 关闭代码编辑器时，恢复模态框的属性
    editor.on('CodeEditorClose', function() {
      const modal = document.getElementById('_bodyModal');
      modal.setAttribute('data-bs-focus', 'true');
      modal.classList.add('modal');
    });
  }
});

修改后的完整代码示例 #

<div class="modal fade" id="_bodyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Why I cannot edit html?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <textarea data-id="0" id="bodyText" ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zatvori</button>
        <button type="button" class="btn btn-primary" onclick="acceptChanges()">Primeni izmene</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-sm btn-info" onclick="editEmailBody();">click here to invoke modal first</button>

<style>
.tox-tinymce-aux {
  z-index: 1060 !important;
}
</style>

<script>
tinymce.init({
  selector: '#bodyText',
  height: 300,
  plugins: 'code',
  menubar: 'view',
  setup: function(editor) {
    editor.on('CodeEditorOpen', function() {
      const modal = document.getElementById('_bodyModal');
      modal.removeAttribute('data-bs-focus');
      modal.classList.remove('modal');
      setTimeout(() => {
        document.querySelector('.tox-code-editor textarea').focus();
      }, 100);
    });

    editor.on('CodeEditorClose', function() {
      const modal = document.getElementById('_bodyModal');
      modal.setAttribute('data-bs-focus', 'true');
      modal.classList.add('modal');
    });
  }
});

const _bodyModal = new bootstrap.Modal(document.getElementById('_bodyModal'), {
  keyboard: false
});

function editEmailBody() {
  tinymce.get('bodyText').setContent("next click on View/Source code to invoke code editor and there try to change something, it is not possible, but i don know why");
  _bodyModal.show();
}

function acceptChanges() {
  // 处理保存逻辑
  _bodyModal.hide();
}
</script>

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