jquery 如何在tinyMCE工具栏上设置z索引?

xxe27gdn  于 2023-03-29  发布在  jQuery
关注(0)|答案(8)|浏览(185)

我正在使用tinyMCE编辑器插件。它将texareas转换为iframe,并在文本内容的顶部显示工具栏。它工作得很好。
有时在内容的上方有一些视频。所以当我点击文本区域时,工具栏会出现,但内容上方的视频播放器会将其隐藏在自己后面。

是否有任何方法可以更改工具栏的z索引?(首选)或者我应该更改工具栏的位置???

下面是我的代码:

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

yfjy0ee71#

增加tinymce的z-index,这样它就不会被另一个div覆盖

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

gkn4icbw2#

您也可以在初始化后立即使用setup参数设置z索引

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

wz3gfoph3#

tinyMCE在textarea上转置,因此将textarea放入容器中并在容器上设置z索引。

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

6jjcrrmo4#

如果视频播放器是基于Flash的,这不会有帮助。
这个页面声称将“opaque”添加到播放器的“wmdode”参数是一个解决方案,但我还没有测试过:http://slightlymore.co.uk/flash-and-the-z-index-problem-solved/

kcugc4gi

kcugc4gi5#

您的Notice中添加了两个content_css,应该只有一个content_css
实际上content_css应该有你的site.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"
  });
hpxqektj

hpxqektj6#

我用这个解决了

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

yebdmbv47#

这工作在Angular ,添加到你的组件.scss

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

hwazgwia8#

tinymce.ui.FloatPanel.zIndex = 99;

相关问题