I'm pretty new to JavaScript, and I built a plugin that adds two tinyMCE buttons to the WordPress editor. The buttons wrap a selected text with shortcodes. One of the two buttons is a menubutton, and I had to put 12 sub-buttons underneath it, when every buttons executes different command.
(function() {
//create the plugin using "tinymce" object
tinymce.create('tinymce.plugins.colDivisorButtons', {
//initialize the plugin
init : function(ed, url) {
//adding two buttons, second one is a MenuButton which have 12 sub buttons
ed.addButton('rowSet', {
title : 'Set row',
image : url + '/img/row-set.png',
cmd : 'setTheRow'
});
ed.addButton('colDivisor', {
title : 'Divise columns',
type : 'menubutton',
image: url + '/img/divisor-columns.png',
menu : [
{
text : "Deploy element to 1 coulmn",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_one")
}
},
{
text : "Deploy element to 2 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_two")
}
},
{
text : "Deploy element to 3 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_three")
}
},
{
text : "Deploy element to 4 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_four")
}
},
{
text : "Deploy element to 5 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_five")
}
},
{
text : "Deploy element to 6 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_six")
}
},
{
text : "Deploy element to 7 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_seven")
}
},
{
text : "Deploy element to 8 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_eight")
}
},
{
text : "Deploy element to 9 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_nine")
}
},
{
text : "Deploy element to 10 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_ten")
}
},
{
text : "Deploy element to 11 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_eleven")
}
},
{
text : "Deploy element to 12 coulmns",
icon : false,
onclick : function(){
ed.execCommand("colDivisor_twelve")
}
}
]
});
//adding command for each button, which execute on each button's "onclick" function
ed.addCommand("colDivisor_one", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-1"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_two", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-2"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_three", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-3"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_four", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-4"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_five", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-5"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_six", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-6"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_seven", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-7"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_eight", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-8"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_nine", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-9"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_ten", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-10"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_eleven", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-11"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand("colDivisor_twelve", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[col-num class="content-area col-sm-12"]' + selected_text + '[/col-num]';
ed.execCommand('mceInsertContent', 0, return_text);
});
//command to set row
ed.addCommand("setTheRow", function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '[row class="row"]' + selected_text + '[/row]';
ed.execCommand('mceInsertContent', 0, return_text);
});
},
});
// register plugin
tinymce.PluginManager.add( 'colDivisor', tinymce.plugins.colDivisorButtons );
})();
The code works, but really bothers me what it looks like, totally contradict the DRY law. I tried to shorten it for hours, no success. Is there ANY way to make it more smart and clean?
