javascript - 如何让 TinyMCE 全屏模式与 Bootstrap NavBar 一起工作

Question

刚开始在 MVC razor 元素中使用 TinyMCE，对 HTML 编辑印象深刻。

当我全屏使用它时(使用以下选项)

$('#ApplicationHtmlTemplate').tinymce({
    theme: "modern",
    plugins: "code,pagebreak,fullpage,table,fullscreen,paste,spellchecker",
    toolbar1: "undo | redo | copy | paste | searchreplace | spellchecker | table | pagebreak | fullpage | fullscreen"
})

我注意到它出现在 Bootstrap 标题栏下方:

使 TinyMCE 编辑出现在 Bootstrap 导航栏下方或上方的“正确”方法是什么？最好在页眉和页脚之间，但全屏也可以。

我尝试使用下面的样式设置 mce-fullscreen 类的顶部和/或边距，但这 a) 看起来很老套 b) 不起作用，因为高度是全屏所以滚动条从底部消失。

div.mce-fullscreen {
    top: 55px;
}

Answer 1

对于“全屏”TinyMCE，在 Bootstrap 导航栏的顶部，您只需设置 .mce-fullscreen 的 z-index 类大于导航栏的 z-index。

如果您使用的是 Less，则 Bootstrap variables.less 文件中有一个名为 @zindex-modal 的变量，用于定义Bootstrap 模式弹出窗口的 Z 索引。所以你可以这样做:

div.mce-fullscreen {
    z-index: @zindex-modal;
}

或者，如果您只是使用 Bootstrap“原始”，那么:

div.mce-fullscreen {
    z-index: 1050;
}

注意: 这不会将它放在页眉和页脚之间，因此仍在寻找更好的答案。