2014-05-05 49 views
2

我一直在创建自定义按钮今天的WordPress的TinyMCE的编辑器,它们与简码,并点击,当他们打开一个弹出,用户可以填写参数指定的简码。这一切都很好,但我觉得它需要更多的用户指导,所以我想在每个参数下的弹出窗口中添加一个说明。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]'); 
    } 
}); 
} 

    }); 
}); 
})(); 

我想要做的是在下拉菜单下面添加一些说明文字 - 我该如何做到这一点?

+0

为什么不在文本参数中添加说明? – Thariama

+0

因为这不会显得非常人性化 - 文本基本上被用于短码的指令,即“您可以编辑在外观>自定义菜单中的不同的颜色” - 这不会在一个下拉菜单很好看 –

回答

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