See here, I think it’s enough for making any kind of TinyMCE Editor button with extended options like dropdown etc
https://www.gavick.com/blog/wordpress-tinymce-custom-buttons
Anyway if we came down to dropdown, checkbox and radio button on Popup, here is a demonstration.
(function () {
tinymce.PluginManager.add('aptmce_btn', function (editor, url) {
editor.addButton('aptmce_btn', {
text: 'Add popup',
icon: false,
onclick: function () {
editor.windowManager.open({
title: 'Enter Your PopUp Contents',
body: [
{
type: 'textbox',
name: 'textboxName',
label: 'Title',
value: ''
},
{
type: 'textbox',
name: 'multilineName',
label: 'Content',
value: '',
multiline: true,
minWidth: 300,
minHeight: 100
},
{
type: 'listbox',
name: 'timeformat',
label: 'Time Format',
'values': [
{text: 'AM', value: 'am'},
{text: 'PM', value: 'pm'}
]
},
{
type: 'checkbox',
name: 'blank',
label: 'Open link in a new tab'
},
{
type: 'radio',
name: 'active',
label: 'Active Something'
}
],
onsubmit: function (e) {
target="";
if(e.data.blank === true) {
target += 'newtab="on"';
}
editor.insertContent('[show_popup title="' + e.data.textboxName + '" content="' + e.data.multilineName + '" timeformat="' + e.data.timeformat + '" something="' + e.data.active + '" ' + target + ' ]');
}
});
}
});
});
})();
Remember One thing, radio type will act like a checkbox because radio button not complete yet, see here https://github.com/tinymce/tinymce/blob/ca0f454b9001b9f20aa26349b25f6d839c1a1146/js/tinymce/skins/lightgray/Radio.less
But if you want to multiple radio button options then you can use listbox (Dropdown) instead multiple radio types.
Hope it helps you.