TinyMCE 5 编辑器未显示任何下拉项目

Question

我正在使用 TinyMCE 4，它运行良好，但我移至 TinyMCE 5，它开始产生问题。 当我单击任何下拉菜单时，它不会显示任何菜单项，例如，如果我单击“段落”下拉菜单，它不会显示任何菜单项。 所有其他按钮都可以正常工作（不是下拉按钮），例如粗体、斜体等。

当我单击任何下拉菜单时，它没有显示任何错误，我多次检查控制台。

官方文档链接： https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/

如果您将 go 放在本文档的底部，您会看到它显示 codepen 链接，代码工作正常，即下拉菜单工作正常，我使用相同的 js 代码，但下拉菜单仍然不工作为了我。 我无法理解问题可能是什么。

我的代码：-

tinymce.init({
    selector: 'textarea',
    width: 600,
    height: 300,
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks code fullscreen insertdatetime media nonbreaking',
      'table emoticons template paste help'
    ],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullpage | ' +
      'forecolor backcolor emoticons | help',
    menu: {
      favs: {title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons'}
    },
    menubar: 'favs file edit view insert format tools table help',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
  });

任何帮助将不胜感激，谢谢。

PS：我使用的是引导程序 4，但没有使用任何引导程序模式。

Answer 1

TinyMCE 在 html 主体的末尾添加一个标签。 此 div 用于创建您单击的下拉按钮列表...因此，如果您有多个具有不同 z-index 的元素，这可能会导致该 div 落后于其他元素并且无法被看到...所以我的解决方案不是最好的：在 TinyMCE init() 的设置选项中添加此代码：

setup: function (ed) {
    ed.on('init', function () {                        
        $(".tox.tox-silver-sink.tox-tinymce-aux").css("z-index", 100000);
    });
}

Answer 2

我把这个 css 放在我的样式表上。 这适用于所有 select 选项。 我的问题是我使用 bootstrap 5 和其他带有 css 的库，TinyMCE 的 z-index 值是问题所在。

.tox .tox-menu.tox-collection.tox-collection--list.tox-selected-menu {
    z-index: 100000 !important;
}

Answer 3

您可以通过简单地修改 css 来解决此问题。

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