Tinymce: Toolbar location at bottom of Editor

tinymce sticky toolbar
tinymce floating toolbar
tinymce toolbar size
tinymce inline toolbar position
tinymce toolbar_items_size
tinymce resize
tinymce themes
fixed_toolbar_container

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",
});

based on the tinyMCE documentation, you can only use theme_modern_toolbar_location : "bottom"

when you use Advanced theme.

theme : "advanced",

Full example:

<script type="text/javascript">
// O2k7 skin
tinyMCE.init({
        // General options
        mode : "exact",
        elements : "elm1",
        theme : "advanced",
        skin : "o2k7",
        plugins : "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        theme_advanced_toolbar_location : "bottom"
});

</script>

<form method="post" action="dump.php">
        <textarea id="elm1" name="elm1" style="width:100%">
        </textarea>


</form>

theme_advanced_toolbar_location, This option enables you to specify where the toolbar should be located. This option can be set to "top" (the default) or "bottom" or "external". This option can only  toolbar_location. Note: This feature is only available for TinyMCE 5.2 and later. The toolbar_location option is used to position the toolbar and menubar. The default behavior is to position the toolbar and menu bar above the content area. Setting this option to bottom positions the toolbar and menu

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);
      });
}

Configure the editor's appearance, including menu and , Configure the editor's appearance, including menu and toolbar controls. allows you to disable the element path within the status bar at the bottom of the editor. To create a custom toolbar button, define and register the button within the setup callback of the TinyMCE configuration. This callback is invoked automatically for every initialized editor instance. This callback is invoked automatically for every initialized editor instance.

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

Do not move toolbar to the bottom wher editing text , I want the toolbar is initially right above tho editing area (moving with Do not move toolbar to the bottom wher editing text nearbottom in inline mode code to change fixed/absolute CSS position of the toolbar container to maintain default  and a table with content that overflows the bounds of the editor the inline table dialog can not be clicked without scrolling all the way to the top, or all the way to the bottom. This makes the "add new row above" very inconvenient. If the 'autoresize' plugin is not active the menubar will be visible at the location of the cursor.

On one of their blog post they say that they have removed advanced_theme. So, if we want to use toolbar at the bottom of TinyMCE, we will have to create a new skin.

Editor Appearance, Configure the editor's appearance, including menu and toolbar controls. allows you to disable the element path within the status bar at the bottom of the editor. Use the toolbar or the menu configuration options.. Toolbar controls. The following table shows all available toolbar items, including items provided by plugins. To retrieve a list from the editor, run the following command from the browser console:

Insert below css code bottom of your custom css file

.mce-top-part{
    position:absolute;
    bottom:0
}

TinyMCE toolbar configuration: Customizing TinyMCE toolbar , Find out how to customize the TinyMCE toolbar options for your own toolbar to the bottom of the frame by adding toolbar_location: bottom . TinyMCE supports some browser-native events, and provides additional events for working with the editor and plugins. Handling Editor events. The following examples illustrate how to use supported native events, editor core events, and plugin events with TinyMCE.

Customizing the editor UI | Docs, Users can easily customize the menu or toolbar without having to edit the theme. A Theme creates the editor construction (left, top, bottom, or right of the editing area The status bar contains the path information and the resize handle. Customising the editor toolbar. An administrator can remove or add buttons to the TinyMCE editor toolbar by altering the Editor toolbar box in Administration > Site administration > Plugins > Text editors > TinyMCE HTML editor > General settings as demonstrated in the screencast Customise the text editor in 2.4.

TinyMCE 5.2 | Docs, The toolbar_location option is used to position the toolbar and menu bar. Setting this option to bottom positions the toolbar and menu bar below the content area. option adds placeholder content that will be shown when the editor is empty. Pro tip: if you set the option resize to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging).. max_width. This option allows you to set the maximum width that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface) when using the modern theme.

tinymce4 inline mode toolbar position, This would be a trivial CSS override, if not for the fact that tinyMCE seems to be changing the classes as you scroll. If you scroll the page down while editing inline  Topic: TinyMCE 1.45: external toolbar I just tested the new version of TinyMCE and found that the external function does not 100% work. The toolbar will display at the bottom of the page when I config the theme_advanced_toolbar_location to "external".

Comments
  • But the advanced theme is removed from TinyMCE 4. So, that means, I cannot use theme_modern_toolbar_location : "bottom",
  • as in the documentation, this property can only be used with legacy version 3.x. i don't see any control of the toolbar location in the new 4.x
  • Sorry to revive a very old post, but is there any changes since 2013 on this issue? I really want my TinyMCE toolbar to be at the bottom of the text box.
  • I had to use .tox div.tox-editor-container as the selector instead because I'm using an Angular wrapper, but this worked. Thanks.