Search code examples
javascripttinymcetinymce-5

TinyMCE hide toolbar overflow programmatically

I have come across an issue using v5 of the TinyMCE editor where, when the screen width is narrow enough for the toolbar to overflow, the overflow bucket will persist when the editors mode is set to readonly. This can cause an issue where the buttons will not be able to be hidden since the overflow toggle button is disabled and because the z-index of the overflow container is high, it can end up overlapping other elements if the user navigates elsewhere on the page.

I have set up the following fiddle that demonstrates the issue. Just make sure your screen width is narrow enough so that the toolbar will overflow, then click the ellipses button to show the overflow buttons. Next, use the "Toggle Read Only" to toggle read only and see how the overflow buttons persist and when in Readonly mode, cannot be hidden again.

https://fiddle.tiny.cloud/Q6haab/1

What I'm looking for is a function that I can call to programmatically hide the overflow container so I can call it prior to toggling the editor mode.

Thanks in advance.

Solution

  • I have updated your fiddle: https://fiddle.tiny.cloud/Q6haab/2

    You can use the queryCommandState on ToggleToolbarDrawer to see if the drawer is open and if it is you can close it with the appropriate ExecCommand:

    if(tinymce.activeEditor.queryCommandState('ToggleToolbarDrawer')) {
  tinymce.activeEditor.execCommand('ToggleToolbarDrawer');
}