Add TinyMCE editor to windowManager textbox

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

0

Leave a Comment