如何使用TinyMCE全屏模式使用Bootstrap NavBar

Question

刚开始在MVC剃刀项目中使用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)看起来很hacky而b)不起作用,因为高度是全屏,所以滚动条从底部消失.

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

Answer 1

对于"全屏" TinyMCE的,在引导的导航栏的顶部,你只需要设置z-index的的.mce-fullscreen类向导航栏的更大z-index.

如果您正在使用Less,则引导程序variables.less文件中有一个变量,@zindex-modal用于定义Bootstrap模式弹出窗口的Z-Index.所以你可以这样做:

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

或者,如果你只是使用Bootstrap"raw",那么:

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

注意: 这不会将它放在页眉和页脚之间,所以仍然在寻找更好的答案.