TinyMCE4 equivalent of toolbar location external?

问题:

In TinyMCE 3 you can use theme_advanced_toolbar_location = 'external' in mce settings, making a class=mceExternalToolbar element.

However, there doesn't seem to be an exact equivalent for TinyMCE 4. Am I missing something, or is an external toolbar that sticks to top when scrolling down, not easily doable in TinyMCE 4?

回答1:

In TinyMCE 3, "theme_advanced_toolbar_location" is a theme option of the "advanced" theme, which is one of the official themes(the other is simple, you can see these 2 themes in folder tiny_mce\themes)

But in TinyMCE 4, there's no "advanced" theme, but a "modern" theme as the default one, with this theme, there's an "inline" option, which is the equivalent of the old "external".

tinymce.init({
            //this will make the toolbar "external"
            inline : true,
            //.....
        });

http://www.tinymce.com/wiki.php/Inline

http://www.tinymce.com/tryit/inline.php

回答2:

Had the same issue. Yes, there is a simple solution but it just didn't seem to come up in any search I did. Eventually found it by accident when looking through the configuration options.

tinymce.init({
    inline: true,
    fixed_toolbar_container: "#mytoolbar"
});

www.tinymce.com/wiki.php/Configuration:fixed_toolbar_container

回答3:

Both answers helped me get a toolbar on the bottom, but this css will help keep it visible all the time.

/* make sure toolbar doesn't get hidden */

#toolbar > .mce-tinymce {
  display: block !important;
}

CSS ONLY SOLUTION

If you can use flexbox and only need to swap position you can use the following with respective prefixes to get the toolbar on the bottom:

.mce-tinymce > .mce-container-body {
  display: flex !important;
  flex-direction: column-reverse;
}