WordPress TinyMCE add a description to a popup form

I have been creating custom buttons for the TinyMCE editor in wordpress today, they are linked to shortcodes and when clicked they open a popup where the user can fill out the parameters for the given shortcode. This all works fine, however I feel it needs a bit more guidance for the users, so I’d like to add a description in the pop-up window under each parameter.

Here is an example of the javascript that handles the popup – you’ll see this creates a dropdown list of 5 items for the user to choose from.

Read More
(function() {
tinymce.PluginManager.add('skizzar_container', function( editor, url ) {
    editor.addButton( 'skizzar_container', {
        title: 'Add a Container',
        icon: 'icon dashicons-media-text',
        onclick: function() {
editor.windowManager.open( {
    title: 'Container',
    body: [{
        type: 'listbox',
        name: 'style',
        label: 'Style',
        'values': [
            {text: 'Clear', value: 'clear'},
            {text: 'White', value: 'white'},                
            {text: 'Colour 1', value: 'colour1'},
            {text: 'Colour 2', value: 'colour2'},
            {text: 'Colour 3', value: 'colour3'},
        ]
    }],
    onsubmit: function( e ) {
        editor.insertContent( '[container style="' + e.data.style + '"]<br /><br />[/container]');
    }
});
}

    });
});
})();

What I want to do is add some description text underneath the dropdown – how can I achieve this?

Related posts

Leave a Reply

1 comment

  1. After your select list, you can add a container and put html in it.

    editor.windowManager.open( {
    title: 'Container',
    body: [{
        type: 'listbox',
        name: 'style',
        label: 'Style',
        'values': [
            {text: 'Clear', value: 'clear'},
            {text: 'White', value: 'white'},                
            {text: 'Colour 1', value: 'colour1'},
            {text: 'Colour 2', value: 'colour2'},
            {text: 'Colour 3', value: 'colour3'},
        ]
    } /*add in the following with the comma */ ,
    {   type: 'container',
        html: '<p>Enter your Text here</p>'
        }
    ],
    onsubmit: function( e ) {
        editor.insertContent( '[container style="' + e.data.style + '"]<br /><br />[/container]');
    }