TinyMCE 4插件 - 在对话框打开时预选列表框选项

Question

如何在插件对话框打开时预先选择特定的列表框选项？

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

由于某些原因,Listbox文档中缺少这个,但解决方案非常简单:将值属性添加到传递给tinymce的列表框对象中,它将预先选择它.

请注意不要将值设置为文本/标签,而是设置要预选的列表框项的实际值.

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