Question

我正在使用tinyMCE编辑器插件。它将texareas转换为iframe，并在文本内容的顶部显示工具栏。它工作得很好。

有时在内容上方会有一些视频。因此，当我单击textarea时，工具栏会出现，但内容上方的视频播放器将其隐藏在自身后面。

有没有办法更改工具栏的z-index？（优选的）或者我应该更改工具栏的位置???

这是我的代码：

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

Answer 1

tinyMCE在textarea上进行转置，因此将textarea放入容器中并在容器上设置z-index。

<div style="z-index: 10;"><textarea></textarea></div>

Answer 2

您也可以使用setup param

在初始化后立即设置z-index

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

Answer 3

增加tinymce的 z-index ，以便它不会被另一个div覆盖

<style>
    .tox-tinymce-aux{z-index:99999999999 !important;}
</style>

Answer 4

如果视频播放器基于Flash，则无效。

此页面声称向播放器的“wmdode”参数添加“opaque”是一种解决方案，但我还没有对其进行测试： http://slightlymore.co.uk/flash-and-the-z-index-problem-solved/

Answer 5

通知您添加了两个content_css，它应该只有一个content_css

实际上content_css应该有你的网站.css添加目的，所以对于textarea你可以限制你的CSS，你可以设置宽度和高度

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/yoursite.css"
  });

Answer 6

我用这个

解决了

$(document).on('focusin', function (e) {
   if ($(e.target).closest(".mce-window").length) 
      e.stopImmediatePropagation();
});

Answer 7

tinymce.ui.FloatPanel.zIndex = 99;

如何在tinyMCE工具栏上设置z-index？

7 个答案: