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

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