How to get TinyMCE full screen mode for working with Bootstrap NavBar

Question

Just started using TinyMCE in the MVC razor project and is very impressed with the HTML editing.

When I went to use it in full screen mode (using the following options)

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

I noticed that it appears under the bootstrap header line:

What is the “right” way to make TinyMCE editing appear either under or on top of the Bootstrap navigation bar? Preferably between header and footer, but fullscreen.

I tried to set the top and / or margins of the class mce-fullscreenusing the style below, but this a) seems to be hacked and b) does not work, since the height is a full screen, so the scrollbars disappear from the bottom.

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

Answer 1

"" TinyMCE Bootstrap z-index .mce-fullscreen , z-index.

Less, boottrap variables.less @zindex-modal , Z-Index Bootstrap. :

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"],

if the plugins are already enabled, then add a comma ",". for example plugins: ["etc", "fullscreen"],

Answer 4

Incorrect plugin syntax:

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

You must separate the plugins with a space, without using a comma:

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

Check here: https://www.tinymce.com/docs/configure/integration-and-setup/#plugins