I am trying to create an accordion shortcode builder for WordPress using TinyMCE's editor.addCommand / windowManager.open function. I'd like to be able to add a repeatable region within the popup window to add a title & a text-area for each accordion-item so that, upon submit, each accordion item shortcode is output with those 2 parameters (title & text-area).
i.e.:
[accordion][accordion-item title=""]content[/accordion-item][accordion-item title=""]content[/accordion-item][accordion-item title=""]content[/accordion-item][/accordion]
Here is an example code of my mce-button using a panel shortcode builder which is similar to the accordion button I wish to build.
(function() {
tinymce.PluginManager.add('shortcode_mce_button', function( editor, url ) {
editor.addButton( 'shortcode_mce_button', {
tooltip: 'Add custom shortcode',
image: '/wp-content/plugins/wdst-shortcodes/public/images/shortcodes.gif',
type: 'menubutton',
menu: [
{
text: 'panel',
onclick: function() {
editor.execCommand('panel_shortcode_mce_button_popup','',{
header : '',
footer : '',
type : 'default',
content : '',
panelclass : ''
});
}
},
]
});
var panel_tag = 'panel'; //Add to the panel shortcode naming; in our case panel works fine.
//add panel popup
editor.addCommand('panel_shortcode_mce_button_popup', function(ui, v) {
//setup defaults
var header = '';
if (v.header)
header = v.header;
var footer = '';
if (v.footer)
footer = v.footer;
var type = 'default';
if (v.type)
type = v.type;
var content = '';
if (v.content)
content = v.content;
var panelclass = '';
if (v.panelclass)
panelclass = v.panelclass;
//open the popup
editor.windowManager.open( {
title: 'Panel Shortcode Builder',
body: [
{//add header input
type: 'textbox',
name: 'header',
label: 'Header',
value: header,
tooltip: 'Leave blank for none.'
},
{//add footer input
type: 'textbox',
name: 'footer',
label: 'Footer',
value: footer,
tooltip: 'Leave blank for none.'
},
{//add type select
type: 'listbox',
name: 'type',
label: 'Type',
value: type,
'values': [
{text: 'Default', value: 'default'},
],
tooltip: 'Select the type of panel you want.'
},
{//add content textarea
type: 'textbox',
name: 'content',
label: 'Content',
value: content,
multiline: true,
minWidth: 300,
minHeight: 100
},
{//add class input
type: 'textbox',
name: 'panelclass',
label: 'Class',
value: panelclass,
tooltip: 'Add custom classes to the panel wrapper.'
},
],
onsubmit: function( e ) { // when the ok button is clicked
//start the shortcode tag
var panel_str = '<p>[' + panel_tag + ' type="'+e.data.type+'" class="'+e.data.panelclass+'"]</p>';
//check for header
if (typeof e.data.header != 'undefined' && e.data.header.length)
panel_str += '<p>[' + panel_tag + '-header class=""][' + panel_tag + '-title class=""]' + e.data.header + '[/' + panel_tag + '-title][/' + panel_tag + '-header]</p>';
//add panel content
panel_str += '<p>[' + panel_tag + '-content class=""]' + e.data.content + '[/' + panel_tag + '-content]</p>';
//check for footer
if (typeof e.data.footer != 'undefined' && e.data.footer.length)
panel_str += '<p>[' + panel_tag + '-footer class=""]' + e.data.footer + '[/' + panel_tag + '-footer]</p>';
//start the shortcode tag
panel_str += '<p>[/' + panel_tag + ']</p>';
//insert shortcode to TinyMCE
editor.insertContent( panel_str );
}
});
});
});
})();
For the accordion shortcode builder, the footer field would be replaced with title and the type dropdown goes away. Title & Content Area would be the sections I would want to repeat.