如何让 TinyMCE 全屏模式与 Bootstrap NavBar 一起使用答案

【问题标题】：How to get TinyMCE fullscreen mode to work with Bootstrap NavBar如何让 TinyMCE 全屏模式与 Bootstrap NavBar 一起使用
【发布时间】：2015-07-22 15:26:01
【问题描述】：

刚开始在一个 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"
})

我注意到它出现在引导标题栏下方：

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

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

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap tinymce-4

【解决方案1】：

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

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

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

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

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

注意： 这并没有把它放在页眉和页脚之间，所以仍在寻找更好的答案。

【讨论】：

【解决方案2】：

将顶部作为nav-bar 页眉或页脚的高度添加到您的样式中：

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

【讨论】：

【解决方案3】：

这很简单。只需添加全屏插件，并不意味着要下载其他插件。只需在包含 TinyMCE 编辑器的地方添加更多代码。只需添加以下代码。

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

如果插件已经包含，则添加逗号“，”。例如插件：[“等”，“全屏”]，

【讨论】：

我会调查并回复您。感谢您的回答

【解决方案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

【讨论】：

我认为逗号没有区别。他们的问题更多与全屏时的样式错误有关。