2

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?

NoBugs
  • 9,310
  • 13
  • 80
  • 146

3 Answers3

7

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

Andrew
  • 5,290
  • 1
  • 19
  • 22
  • Thanks, but that doesn't add an element with class mceExternalToolbar, I assume any styling and behavior based on that would require complete rewrite? It looks like I also have something failing silently with this option, making only the textarea visible, no iframes created. – NoBugs Mar 03 '14 at 08:45
  • You're right, @NoBugs. Big changes with themes. There'a a "mce-tinymce-inline" class with "inline" mode, which might be helpful. Also, no iframe will be created, it uses div[contenteditable="true"] as the wysiwyg editor. – Andrew Mar 03 '14 at 09:05
  • It's worth noting that the main difference of inline-mode is it uses a Contenteditable instead of an iframe. – NoBugs Nov 01 '14 at 02:00
1

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

Hoogs
  • 85
  • 4
1

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;
}
souporserious
  • 2,079
  • 2
  • 27
  • 47