How do I add toolbar buttons to a custom tinymce dropdown menu?

Question

I've created a custom dropdown in tinymce like this:

tinymce.init({
    toolbar: "alignment",

    setup: function(editor) {
        editor.addButton('alignment', {
            type: 'menubutton',
            text: 'Alignment',
            icon: false,
            menu: [
                { text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
                { text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
                { text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
                { text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
            ]
        });

    }

});

which creates this:

tinymce dropdown

However what I'd like is to just move the alignment buttons from the main toolbar in the dropdown menu.

How do I got about putting these actual buttons from the toolbar, into a dropdown menu? Is it like the code above or is a a totally different way?

alignment buttons So basically put these buttons in the dropdown above with the toggle states for on and off too.

Which version of TinyMCE are you using? – alex Jan 12 '15 at 17:56 — alex, Jan 12 '15 at 17:56
It's the latest, version 4.1.7. – CafeHey Jan 13 '15 at 10:51 — CafeHey, Jan 13 '15 at 10:51

sbedulin · Accepted Answer · 2015-01-15T09:26:48.587

Try this setup - Plunker

tinymce.init({
    selector: "textarea",
    toolbar: "styleselect | bold italic | alignment | alignmentv2",
    setup: function(editor) {
      editor.addButton('alignment', {
          type: 'listbox',
          text: 'Alignment',
          icon: false,
          onselect: function(e) {
            tinyMCE.execCommand(this.value());
          },
          values: [
              {icon: 'alignleft', value: 'JustifyLeft'},
              {icon: 'alignright', value: 'JustifyRight'},
              {icon: 'aligncenter', value: 'JustifyCenter'},
              {icon: 'alignjustify', value: 'JustifyFull'},
          ],
          onPostRender: function() {
            // Select the firts item by default
            this.value('JustifyLeft');
          }
      });

      editor.addButton('alignmentv2', {
            type: 'menubutton',
            text: 'Alignment v2',
            icon: false,
            menu: [
                {icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }},
                {icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }}
            ]
        });
    }
});

Not only does that not show the current alignment as its icon when the dropdown isn't shown, it doesn't select the proper alignment of the selected line when you bring up the dropdown. — NoBugs, Feb 04 '16 at 23:27

Roman Vasyliev · Answer 2 · 2016-06-09T18:22:04.750

@NoBugs, you can enhance the onselect method to perform the alignment icon update.

At first, by examining structure of this object in the onselect method we'll see that this.settings.values property stores an array with early defined values.

By using one of many find utility functions we get the selected value item and update the icon as needed:

onselect: function() {
  selectedItem = find(this.settings.values, {value: this.value()})
  this.icon(selectedItem.icon)
  tinyMCE.execCommand(this.value());
}

Hope, this helps. Cheers!

Alan Gill · Answer 3 · 2017-05-04T09:12:25.713

This is probably best solved using a custom split button. That way we can assign the last selected option to the main button.

See the result here - CodePen

tinymce.init({
  selector: '#editor',
  menubar: false,
  toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent',

  setup: function (editor) {
    editor.on('init', function() {
      this.getDoc().body.style.fontSize = '16px';
      this.getDoc().body.style.fontFamily = 'Georgia';
    });
    editor.addButton('alignmentsplit', {
      type: 'splitbutton',
      text: '',
      icon: 'alignleft',
      onclick: function(e) {
        tinyMCE.execCommand(this.value);
      },
      menu: [{
          icon: 'alignleft',
          text: 'Align Left',
          onclick: function() {
            tinyMCE.execCommand('JustifyLeft');
            this.parent().parent().icon('alignleft');
            this.parent().parent().value = 'JustifyLeft'
          }
        }, {
          icon: 'alignright',
          text: 'Align Right',
          onclick: function() {
            tinyMCE.execCommand('JustifyRight');
            this.parent().parent().icon('alignright');
            this.parent().parent().value = 'JustifyRight';
          }
        }, {
          icon: 'aligncenter',
          text: 'Align Center',
          onclick: function() {
            tinyMCE.execCommand('JustifyCenter');
            this.parent().parent().icon('aligncenter');
            this.parent().parent().value = 'JustifyCenter';
          }
        }, {
          icon: 'alignjustify',
          text: 'Justify',
          onclick: function() {
            tinyMCE.execCommand('JustifyFull');
            this.parent().parent().icon('alignjustify');
            this.parent().parent().value = 'JustifyFull';
          }
        }
      ],
      onPostRender: function() {
        // Select the first item by default
        this.value ='JustifyLeft';
      }
    });
  }
});

Note: If you re-select an alignment option on content that is already aligned that way, TinyMCE toggles the alignment formatting off. This is default TinyMCE behaviour, but you would need to indicate that the section already has that formatting via a toggle state on the button for this to make more sense to the user. This has not been implemented above.

How do I add toolbar buttons to a custom tinymce dropdown menu?

3 Answers3

Linked