2

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);
Tim van Dam
  • 21
  • 2

1 Answers1

2

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'
Ben Long
  • 333
  • 1
  • 5
  • Thanks for your reply! When I set the toolbar_mode to 'floating', the same behaviour takes place. How is this possible? I'm using the inline editor. – Tim van Dam Jun 11 '20 at 18:15
  • Configure the toolbar as a single toolbar by providing a single string (without square brackets). I've updated my answer to reflect this. – Ben Long Jun 12 '20 at 00:33
  • 1
    Thanks for you reply! I configured the toolbar as a single string. Now I see 3 dots at the end, when I click on them the rest of the toolbar options are shown. I want the toolbar to move to the left and remain it's full width. Is that possible? – Tim van Dam Jun 14 '20 at 14:14