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

When I went to use it fullscreen however (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 it appears underneath the bootstrap header bar:

What is the "correct" way to make the TinyMCE edit appear either underneath, or on top of, the Bootstrap nav bar? Preferably between the header and footer, but fullscreen would do.

I tried setting the top and/or margins of the mce-fullscreen class, using the style below, but this a) seems hacky and b) does not work as the height is the full screen so the scrollbars disappear off the bottom.

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

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

When I went to use it fullscreen however (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 it appears underneath the bootstrap header bar:

What is the "correct" way to make the TinyMCE edit appear either underneath, or on top of, the Bootstrap nav bar? Preferably between the header and footer, but fullscreen would do.

I tried setting the top and/or margins of the mce-fullscreen class, using the style below, but this a) seems hacky and b) does not work as the height is the full screen so the scrollbars disappear off the bottom.

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

• javascript
• jquery
• css
• twitter-bootstrap
• tinymce-4

5 Answers 5

For "fullscreen" TinyMCE, over the top of the Bootstrap nav bar, you just need to set the z-index of the .mce-fullscreen class to greater than the nav bar's z-index.

If you are using Less, there is a variable in the bootstrap variables.less file called @zindex-modal used to define the Z-Index of Bootstrap modal popups. So you could do this:

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

Or, if you just use Bootstrap "raw" then:

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

Note: This does not place it between the header and footer, so still looking for a better answer.

Add to your style the top as the height of your nav-bar header or footer:

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

For tiny 5, when you toggle a bootstrap modal from some custom toolbar action then they appear under the editor and are not visible. If you exit the full screen mode, the modal is then visible (provided it hasn't been hidden beforehand). So I changed the z-index value for the selector .tox.tox-tinymce.tox-fullscreen like it is given below.

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

This then makes the modals appear on top of the editor even when it is in full screen mode.

It's very simple. Just add full screen plugins, it didn't mean to download additional plugins. Just add some more code where you include your TinyMCE editor. Just add following code.

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

if plugins already included then add with comma ",". e.g.plugins: ["etc", "fullscreen"],

Your plugin syntax is not correct:

$('#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 to separate the plugins using a blank space, not 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