Wordpress TinyMCE 向弹出表单添加描述答案

【问题标题】：Wordpress TinyMCE add a description to a popup formWordpress TinyMCE 向弹出表单添加描述
【发布时间】：2014-06-21 23:46:09
【问题描述】：

我今天一直在为 wordpress 中的 TinyMCE 编辑器创建自定义按钮，它们链接到简码，单击时会打开一个弹出窗口，用户可以在其中填写给定简码的参数。这一切都很好，但是我觉得它需要给用户更多的指导，所以我想在每个参数下的弹出窗口中添加一个描述。

这是一个处理弹出窗口的 javascript 示例 - 您会看到这会创建一个包含 5 个项目的下拉列表供用户选择。

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

    });
});
})();

我想做的是在下拉列表下方添加一些描述文本 - 我该如何实现？

【问题讨论】：

为什么不在文本参数中添加描述？
因为这看起来不太友好 - 文本本质上是正在使用的简码的说明，即“您可以在外观中编辑不同的颜色 > 自定义菜单” - 看起来不会很棒的下拉菜单

标签： javascript wordpress tinymce dropdownbox

【解决方案1】：

在您的选择列表之后，您可以添加一个容器并将 html 放入其中。

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

【讨论】：