Search code examples
jquerycsstinymce

How to set z-index on tinyMCE toolbar?

I am using tinyMCE editor plugin. It converts texareas into iframes and a toolbar appears at top of the text content. It is working perfectly.

Sometimes there are some videos above the content. So when I click textarea, the toolbar appears but video player above the content hides it behind itself.

Is there any way to change the z-index of the toolbar ? (Preferable) Or should I change the location of toolbar ???

Here is my code:

tinyMCE.init({
        mode : "textareas",
        editor_selector : "combo123",
        theme : "advanced",
        plugins : "save, paste, autoresize, asciimath, asciisvg",
        theme_advanced_styles: "Foo=foo, Bar=bar",
        content_css : "/css/tiny_mce.css"
  });
Solution

  • You may also set the z-index right after initialization using the setup param

    setup : function(ed) {
    ed.onInit.add(function(ed){
        $('tr.mceFirst').css('z-index','1');
    });
}),