Bootstrap模态框内TinyMCE行内编辑器工具栏显示异常求助

我明白你遇到的困扰——已经通过调整z-index让工具栏显示出来，但就是没法点击。这大概率是Bootstrap模态框的两个特性在搞鬼：溢出裁剪或者焦点陷阱，下面给你几个针对性的解决方案：

方案一：允许模态框内容溢出，让工具栏可点击 #

Bootstrap模态框的.modal-content默认是overflow: auto，会裁剪超出模态框边界的内容，这就导致工具栏超出部分的点击事件被拦截。你可以修改模态框的overflow属性：

.modal {
  overflow: visible !important;
}

这样工具栏即使超出模态框范围，也能正常接收点击事件了。

方案二：调整工具栏定位，让它在模态框内部显示 #

如果不想让模态框内容溢出，你可以给模态框的主体区域预留工具栏的空间，同时调整工具栏的定位：

/* 给模态框主体顶部留出工具栏的高度 */
.modal-body {
  padding-top: 60px;
}

/* 把工具栏固定在模态框顶部 */
.tox-tinymce-inline .tox-toolbar {
  position: absolute;
  top: 10px; /* 调整到合适位置 */
  left: 10px;
  right: 10px;
  z-index: 1600 !important;
}

同时确保你的TinyMCE配置里设置了正确的工具栏位置：

tinymce.init({
  selector: '#yourEditor',
  inline: true,
  toolbar_location: 'top',
  // 其他配置...
});

方案三：禁用Bootstrap模态框的焦点陷阱 #

Bootstrap模态框默认会强制把焦点锁定在模态框内部，防止用户点击外部元素，这可能会拦截工具栏的点击事件。你可以在模态框初始化时禁用这个特性：

// 初始化模态框时关闭焦点陷阱
$('#yourModal').modal({
  focus: false
});

// 或者在模态框显示后移除焦点拦截事件
$('#yourModal').on('shown.bs.modal', function() {
  $(this).off('focusin.bs.modal');
});

这三种方案里，方案一最简单直接，方案三适合需要保留模态框溢出裁剪的场景，你可以根据自己的需求选择尝试。

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