TinyMCE 5编辑器下拉菜单无选项显示问题咨询

以下是针对对应场景的排查和修复方案，按优先级排序：

• Bootstrap 4 样式冲突修复
  该场景下最高概率的问题原因：Bootstrap 4 全局默认自带 [hidden] { display: none !important; } 样式规则，优先级高于 TinyMCE 5 内部的下拉菜单显示样式，导致下拉菜单渲染后被强制隐藏，控制台不会抛出任何报错。
  只需在全局自定义样式中添加如下代码即可解决，该规则仅作用于 TinyMCE 内部元素，不会影响 Bootstrap 原有功能：

  .tox [hidden] {
    display: inherit !important;
  }
  

• 父容器溢出裁剪修复
  检查 TinyMCE 编辑器所在的所有父级元素，是否设置了 overflow: hidden、overflow-x: hidden 或 overflow-y: hidden 属性，溢出裁剪会把弹出的下拉菜单截掉。
  可以临时将父容器的overflow属性改为visible验证是否是该问题，如果确认是该原因，可在TinyMCE初始化配置中添加ui_mode: 'split'参数，让下拉菜单直接挂载到页面body节点，不受父容器溢出规则限制。
• 皮肤资源完整性检查
  确认引入的TinyMCE 5的皮肤静态资源完整，缺失皮肤css文件也会导致下拉菜单样式异常不可见。如果是通过npm引入TinyMCE，需要确认打包流程中已将node_modules/tinymce/skins目录正确复制到静态资源目录，也可以在初始化配置中手动指定皮肤路径：

  tinymce.init({
    // 原有配置不变，新增如下行
    skin_url: '/你的静态资源路径/tinymce/skins/ui/oxide'
  })
  

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