TinyMCE 4 plugin - preselect listbox option when dialog opens - tinymce-4

Question

How can you preselect a specific listbox option when your plugin dialog opens?
tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
icon: true,
image: url + '/img/mybutton.png',
title: 'Select An Option',
onclick: function() {
editor.windowManager.open({
title: 'My options',
body: [
{
type: 'listbox',
name: 'myoptions',
label: 'My Options',
'values': [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}, /* preselect this option */
{text: 'Option 4', value: '4'},
{text: 'Option 5', value: '5'},
]
}
],
onsubmit: function(v) {
editor.insertContent(v.data.myoptions);
}
});
}
});
});

Answer 1

For some reason this is missing in the Listbox documentation but the solution is quite simple: Add a value property to the listbox object you pass to tinymce and it will preselect it.
Be careful to set the value not to the text/label but the actual value of the listbox item you want to preselect.
tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
icon: true,
image: url + '/img/mybutton.png',
title: 'Select An Option',
onclick: function() {
editor.windowManager.open({
title: 'My options',
body: [
{
type: 'listbox',
name: 'myoptions',
label: 'My Options',
values: [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}, /* preselect this option */
{text: 'Option 4', value: '4'},
{text: 'Option 5', value: '5'},
],
value: '3'
}
],
onsubmit: function(v) {
editor.insertContent(v.data.myoptions);
}
});
}
});
});

Answer 2

I found it much easier to include an external page in the dialog so I can create my own form from scratch and easily control it with Jquery.
// Opens a HTML page inside a TinyMCE dialog and pass in two parameters
editor.windowManager.open({
title: "My PHP/HTML dialog",
url: 'mydialog.php',
width: 700,
height: 600
}, {
content: tinymce.activeEditor.selection.getContent({format: 'html'}),
nodeName: editor.selection.getNode().nodeName
});
Then in mydialog.php interact with the current TinyMCE with:
/* get content from TinyMCE */
console.log(args.content);
console.log(args.nodeName);
/* set content in TinyMCE */
top.tinymce.activeEditor.insertContent('My changed content here');
/* close the dialog */
top.tinymce.activeEditor.windowManager.close();
The reference can be found here:
http://www.tinymce.com/wiki.php/Tutorials:Creating_custom_dialogs

Answer 3

Try to use onPostRender and set the selected value to with the value() function.
Example:
{
type: 'listbox',
name: 'text',
values: [
{text : '1', value : '1'},
{text : '2', value : '2'},
{text : '3', value : '3'}
],
onPostRender: function() {
this.value('2');
}
}

Answer 4

According to their listbox example (https://www.tiny.cloud/docs-4x/demo/custom-toolbar-listbox/) it can be done with onPostRender. I have the following code working in WordPress 5.3.2 (classic editor plugin enabled):
tinymce.PluginManager.add('mybutton', function( editor, url ) {
editor.addButton( 'mybutton', {
type: 'listbox',
text: tinyMCE_object.button_name,
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: '[one_half]', value: '[one_half] [/one_half]' },
{ text: '[one_third]', value: '[one_third] [/one_third]' },
{ text: '[one_fourth]', value: '[one_fourth] [/one_fourth]' },
{ text: '[one_fifth]', value: '[one_fifth] [/one_fifth]' },
{ text: '[grid]', value: '[grid] [/grid]' },
{ text: '[grid_element]', value: '[grid_element] [/grid_element]' }
],
onPostRender: function () {
// Select the second item by default
this.value('[one_third] [/one_third]');
}
});
});