TinyMCE: How to display all toolbars on a single row?

Question

This question is basically reverse of Is there a way to wrap the toolbar buttons to the next row in TinyMCE if the width of the editor is too small?

I have a TinyMCE

Answer 1

Add this Jquery line at your javascript code:

$('[id^=tinyelement_toolbar]').css('display','inline-table')

Answer 2

Depending on the number of buttons enabled, setting table.mceToolbar to display inline-table can push the editor's width to be too wide.

Instead float each table left so it breaks when the maximum allowable width is reached.

 table.mceToolbar {margin-left:3px; float:left}

Answer 3

Each line of buttons is wrapped in a table so theme_advanced_buttons1 is inside a table, theme_advanced_buttons2 is inside another table and theme_advanced_buttons3 is inside another one, so to make them inline you can use

.wp_themeSkin table.mceToolbar {
  margin: 0 6px 2px; // this is by default
  display: inline-table; // this is extra I've added to keep them in single line
}

Below is a screenshot of display: inline-table; in full screen mode of the editor, all three lines of buttons are in one line, side by side

Answer 4

This won't work using css only because the different rows have an own table element. What you can do is to check before tinymce initialization how wide the users screen is. Depending on this value you may set the theme_advanced_buttons1 and theme_advanced_buttons2 etc...

Example:

var width = screen.width;

tinyMCE.init({
mode: 'exact',
    ....

    theme_advanced_buttons1 : width < 1024 ? "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter" : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : width < 1024 ? "justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect" : "",
    ...
});