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

Question

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

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

有什么办法可以改变工具栏的 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的z-index，这样它就不会被另一个div覆盖

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

Answer 2

您还可以在初始化后使用设置参数设置 z-index

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

Answer 3

tinyMCE 正在对文本区域进行转置，因此将文本区域放入容器中并在容器上设置 z-index。

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

Answer 4

如果视频播放器是基于 Flash 的，这将无济于事。

此页面声称将“opaque”添加到播放器的“wmdode”参数是一个解决方案，但我还没有测试过：
http://slightlymore.co.uk/flash-and- -z-index-问题已解决/

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

这适用于角度，将其添加到您的 component.scss

::ng-deep .tox-tinymce-inline {
  z-index: 200 !important;
}

Answer 8

tinymce.ui.FloatPanel.zIndex = 99;