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:

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?

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

Answer 1

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'); }}
            ]
        });
    }
});