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

Question

I was working with TinyMCE 4, it was working good but I moved to TinyMCE 5, it started creating issues. When I click any drop-down menu it doesn't show any menu item eg if I click on the "Paragraph" drop down it is not displaying any menu item. All other buttons are working fine(that are not drop-down) eg bold, italic etc.

When I click any drop-down menu it doesn't show any error, I checked the console many times.

Official document link : https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/

If you go to the bottom of this document, you'll see it show codepen link, there code is working fine ie drop-down menu are working fine, I'm using the same js code but still drop-down menu is not working for me. I'm not able to understand what the issue can be.

My code:-

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

Any help will be appreciated, Thanks .

PS: I'm using bootstrap 4 but not using any kind of bootstrap modal.

Answer 1

TinyMCE adds a tag at the end of your html body. this div is for create lists of dropdown buttons you click... so if you have multiple elements with different z-index, this may cause that div goes behind others and cant be seen... so my solution which is not the best is: add this code in setup option of TinyMCE init():

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

Answer 2

I put this css on my stylesheet. This works for all select options. My problem was i use bootstrap 5 and others libraries with css, the z-index value of TinyMCE was the problem.

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

Answer 3

You can resolve this by simply modifying the css.

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