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.
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);
});
}
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;
}
You can resolve this by simply modifying the css.
.tox-tinymce-aux {
z-index: 130000000000 !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.