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

i2byvkas  于 2022-12-01  发布在  Bootstrap
关注(0)|答案(5)|浏览(409)

刚开始在一个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编辑出现在引导程序导航栏的下面或上面?最好是在页眉和页脚之间,但全屏也可以。
我试着设置mce-fullscreen类的顶部和/或边距,使用下面的样式,但这a)似乎很笨拙,b)不起作用,因为高度是全屏,所以滚动条从底部消失。

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

nhaq1z211#

对于“全屏”TinyMCE,* 在引导程序导航栏的顶部 *,您只需要将.mce-fullscreen类的z-index设置为大于导航栏的z-index
如果你使用的是Less,在引导程序variables.less文件中有一个名为@zindex-modal的变量,用于定义引导程序模态弹出窗口的Z索引。

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

或者,如果您只使用Bootstrap“raw”,则:

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

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

x33g5p2x

x33g5p2x2#

将top作为nav-bar页眉或页脚的高度添加到样式中:

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

htzpubme3#

对于tiny 5,当你从某个自定义工具栏操作切换到引导模式时,它们会出现在编辑器下,并且不可见。如果你退出全屏模式,那么该模式就会可见(前提是它之前没有被隐藏)。所以我修改了选择器.tox.tox-tinymce.tox-fullscreen的z索引值,如下所示。

.tox.tox-tinymce.tox-fullscreen {
    z-index: 950;
}

这将使模态显示在编辑器的顶部,即使它处于全屏模式。

cwdobuhd

cwdobuhd4#

这很简单,只需添加全屏插件,并不意味着要下载额外插件,只需在包含TinyMCE编辑器地方添加一些代码,只需添加以下代码

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

如果已包含插件,则使用逗号“"添加。例如,plugins:[“等”、“全屏”]、

44u64gxh

44u64gxh5#

您的插件语法不正确:

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

相关问题