Tinymce: Toolbar location at bottom of Editor

Question

I am using TinyMCE 4 with modern theme. I want to set the location of toolbar at the bottom of editor (just like where the status bar is)

Here is the code, but its not working:

tinymce.init({
                selector: 'textarea#editor',
                menubar: false,
                statusbar: false,
                resize: false,
                height: textEditHeight,
                theme_modern_toolbar_location : "bottom",
});

Answer 1

I know this is an old post, but I figured I would share my solution.

I add an event handler for the 'init' event and then use jQuery to change the order of the toolbar and editor divs.

tinyMCE.init({
...

    setup: function (ed) {
      ed.on('init', function (evt) {
          var toolbar = $(evt.target.editorContainer)
                            .find('>.mce-container-body >.mce-toolbar-grp');
          var editor = $(evt.target.editorContainer)
                            .find('>.mce-container-body >.mce-edit-area');

          // switch the order of the elements
          toolbar.detach().insertAfter(editor);
      });
}

Answer 2

I have figured out a way , with pure CSS . Just add this code in your custom css file or in style tag in html .

#mceu_5-body{
   display: flex;
   flex-direction: column-reverse;
}

What it does is reverse the direction in which the divs are arranged i.e. from bottom to top. The only downside is that flex is a modern CSS property, thus not supported in old browsers