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

Answer 2

@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!

Answer 3

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.