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;
   
}