TinyMCE 4 plugin - list preselection when opening a dialog
How can you select a specific list option when opening a plugin dialog?
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);
}
});
}
});
});
+4
source to share
3 answers
For some reason this is not in the Listbox documentation, but the solution is pretty simple: add a value property to the listbox object you pass to tinymce and it will prefetch it.
Be careful not to set the value to the text / label, but to the actual value of the list 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);
}
});
}
});
});
+9
source to share
It was easier for me to include an external page in the dialog so that I could create my own form from scratch and manipulate it easily 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 link can be found here:
http://www.tinymce.com/wiki.php/Tutorials:Creating_custom_dialogs
0
source to share