I’m creating a custom TinyMCE button that will open the following modal to create a shortcode:
What I want to have is the textbox be a TinyMCE editor. I was hoping that the TinyMCE body options would provide this, but it doesn’t. Does anyone have any idea how I can achieve this? Here is the code to create this modal.
tinymce.PluginManager.add( 'color_block', function( editor, url ) {
// Add Button to Visual Editor Toolbar
editor.addButton('color_block', {
title: 'Insert a color block',
image: url + '/youtube.gif',
cmd: 'color_block'
});
// Add Command when Button Clicked
editor.addCommand('color_block', function() {
// Check we have selected some text that we want to link
editor.windowManager.open({
title: 'Add a color block',
body: [
{
type : 'listbox',
name : 'color',
label : 'Colors',
values : [
{ text: 'Blue', value: 'blue' },
{ text: 'Green', value: 'green' },
{ text: 'Sand', value: 'sand' }
],
minWidth: 350
},
{
type: 'textbox',
name: 'title',
label: 'Title',
minWidth: 350
},
{
type: 'textbox',
multiline: true,
name: 'content',
label: 'Content',
minWidth: 350,
minHeight: 150
},
{
type: 'textbox',
multiline: true,
name: 'micetype',
label: 'Mice Type (Optional)',
minWidth: 350,
minHeight: 50
}
],
onsubmit: function(e) {
editor.focus();
// Insert selected callout back into editor, wrapping it in a shortcode
var micetype = (e.data.micetype) ? (' micetype="'+e.data.micetype+'"') : ('');
editor.execCommand('mceInsertContent', false, '[color_block color="'+e.data.color+'" title="'+e.data.title+'"'+micetype+']'+e.data.content+'[/color_block]');
}
});
});
});