CODEWITHSUNDEEP
tinymcetinymce-6
Mathew Stephen
Mathew Stephen

Reputation: 359

TinyMCE - how to make toolbar expanded by default

I am having TinyMCE-6 with the following toolbar options:

    menubar: false,
    plugins: ['searchreplace', 'link', 'anchor', 'image', 'table', 'charmap','fullscreen','code', 'preview',
    'lists','help','wordcount'],
    toolbar: 'cut copy paste pastetext | undo redo | searchreplace | selectall | link unlink anchor | ' +
    'image| table | hr| charmap  |fullscreen | code | preview print | ' +
    'bold italic underline strikethrough subscript superscript | removeformat |'+
    'numlist bullist | outdent indent | blockquote |alignleft aligncenter alignright alignjustify |'+
    'blocks fontfamily fontsize | forecolor backcolor|help |' +
    '',

When it is rendered in a page, all the toolbars are not shown by default. enter image description here

I have to click on the 3 dots on the right to expand the whole toolbar. enter image description here

Is it possible to have all the toolbar expanded by default while loading tinyMCE ?

Upvotes: 0

Views: 694

Answers (2)

Mathew Stephen
Mathew Stephen

Reputation: 359

We can make use of toolbar_mode configuration in TinyMCE

toolbar_mode :'wrap',

https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#wrap

Working example - https://fiddle.tiny.cloud/duiaab/1

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13726

You can do what you want with an API call you add to your TinyMCE configuration.

The TinyMCE command to use is ToggleToolbarDrawer. You can use the setup function in your TinyMCE init to call this API:

tinymce.init({
  ...
  setup: function (editor) {
    editor.on('init', function (e) {
      editor.execCommand('ToggleToolbarDrawer')
    });
  }
  ...
});

Here is a working example: https://fiddle.tiny.cloud/skiaab

Upvotes: 1

Related Questions