如何使用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标题栏下面：

什么是＆＃34;正确＆＃34;如何使TinyMCE编辑出现在Bootstrap导航栏的下方或顶部？最好在页眉和页脚之间，但全屏会这样做。

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

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

Answer 1

对于＆＃34;全屏＆＃34; TinyMCE，在Bootstrap导航栏的顶部，您只需要将z-index类的.mce-fullscreen设置为大于导航条的{{1} }}

如果您使用的是z-index，则引导程序Less中有一个名为variables.less的变量，用于定义Bootstrap模式弹出窗口的Z-Index。所以你可以这样做：

@zindex-modal

或者，如果你只是使用Bootstrap＆＃34; raw＆＃34;然后：

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

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

Answer 2

将顶部添加为nav-bar页眉或页脚的高度：

div.mce-fullscreen {z-index: 1050;top: 51px!important;bottom: 51px!important;}

Answer 3

这非常简单。只需添加全屏插件，它并不意味着下载额外的插件。只需在包含TinyMCE编辑器的地方添加更多代码即可。 只需添加以下代码即可。

                 toolbar: "fullscreen",
                 plugins: ["fullscreen"],

如果已经包含插件，则添加逗号＆＃34;，＆＃34;。                      egplugins：[＆＃34; etc＆＃34;，＆＃34; fullscreen＆＃34;]，

Answer 4

您的插件语法不正确：

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

您必须使用空格分隔插件，而不是使用逗号：

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

点击此处：https://www.tinymce.com/docs/configure/integration-and-setup/#plugins