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

Question

I am using TinyMCE in advanced theme. Today I must specify in advance the buttons in each toolbar row: theme_advanced_buttons1, theme_advanced_buttons2 and theme_advanced_buttons3.

Is there a way to just specify a single list of buttons and let the buttons wrap to the next row if the width of the editor is too small to contain them all in a single line?

Answer 1

It doesn't do it by itself, but in tinyMCE 4.X, you can add multiple toolbars like below

tinymce.init({
        selector: ".tinymce-textarea",
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen textcolor emoticons",
            "insertdatetime media table contextmenu paste jbimages"//moxiemanager
        ],
        file_browser_callback: false,
        toolbar1: " bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link image media preview ",
        toolbar2: "forecolor backcolor emoticons | jbimages ",
        relative_urls : false

    });

Answer 2

I'm surprised this wasn't an answer, but I just used:

.mce-btn-group .mce-btn {
    float: left;
}

I only have one toolbar, and on smaller screens it just wraps as needed.

Answer 3

No, unfortunately, this is not possible (using Tinymce3). For Tinymce4, this is another issue.