如何让 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 header 栏下方：

使 TinyMCE 编辑显示在 Bootstrap 导航栏下方或上方的 "correct" 方法是什么？最好在 header 和页脚之间，但全屏也可以。

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

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

Answer 1

对于 "fullscreen" TinyMCE，在 Bootstrap 导航栏的顶部 ，您只需设置 z-index .mce-fullscreen class 大于导航栏的 z-index.

如果您使用的是Less，bootstrap variables.less文件中有一个名为@zindex-modal的变量，用于定义[=34=的Z-Index ] 模态弹出窗口。所以你可以这样做：

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

或者，如果您只使用 Bootstrap "raw" 那么：

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

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

Answer 2

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

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

Answer 3

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

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

如果插件已包含，则添加逗号“,”。 e.g.plugins: ["etc", "fullscreen"],

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

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

$('#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

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

How to get TinyMCE fullscreen mode to work with Bootstrap NavBar

javascript

css

jquery

twitter-bootstrap

tinymce-4