Keep TinyMCE inline editor toolbar in one row

Question

The TinyMCE inline editor toolbar changes into two rows when the difference in pixels between the left of the editor element and the right of the window are less than the width of the toolbar. Is there a way to disable this behaviour, and instead move the toolbar to the left so it can be displayed as full width?

Current situation (right side of image is right side of window)

What I want to achieve, this image is photoshopped so the layout is right (right side of image is right side of window)

I initialize my TinyMCE 5 editor with the following object:

var textEditorConfig = {
  menubar: false,
  inline: true,
  plugins: [
    'link',
    'lists',
    'autolink',
  ],
  toolbar: [
    'undo redo | bold italic underline | formatselect fontselect | forecolor | alignleft aligncenter alignright'
  ],

  block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
};



textEditorConfig.target = target; // This target variable is just a DOM element


tinymce.init(textEditorConfig);

Answer 1

You can configure how TinyMCE adjusts to fit the space using the toolbar_mode option. For example:

toolbar_mode: 'scrolling'

There are four modes to choose from. The wrap mode wraps overflow toolbar options onto a second row. Any of the other three modes - floating, sliding, scrolling, will keep the toolbar as one row. The default toolbar mode is floating.

However, toolbar modes are not available when using multiple toolbars or the toolbar(n) option.

When the toolbar is configured with an array of space separated strings, it is being configured as multiple toolbars.

Configure a single toolbar by providing a single string (without square brackets):

toolbar: 'undo redo | bold italic underline | formatselect fontselect | forecolor | alignleft aligncenter alignright'