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