TinyMCE 4 plugin - preselect listbox option when dialog opens

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