Shortcode Generated Around Selected Content WordPress

• REFUNDED

I have JS code below that generate pop up window (custom button in tinyMC).
I choose few options there and include shortcode to post content.

I want to know what code I have to add below to generate shortcode around selected content.
Becouse right now is just included shortcode outside the content even if I select it.
Thank for help!


(function(){
// creates the plugin
tinymce.create('tinymce.plugins.wmshortcodes', {
// creates control instances based on the control's id.
// our button's id is "wmshortcodes_button"
createControl : function(id, controlManager) {
if (id == 'wmshortcodes_button') {
// creates the button
var button = controlManager.createButton('wmshortcodes_button', {
title : 'Shortcodes Editor', // title of the button
image : '../wp-includes/images/smilies/icon.gif', // path to the button's image
onclick : function() {
// triggers the thickbox
var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
W = W - 80;
H = H - 84;
tb_show( 'Shortcodes Editor', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=wmshortcodes-form' );

}
});
return button;
}
return null;
}
});

// registers the plugin. DON'T MISS THIS STEP!!!
tinymce.PluginManager.add('wmshortcodes', tinymce.plugins.wmshortcodes);


// executes this when the DOM is ready
jQuery(function(){


// creates a form to be displayed everytime the button is clicked
// you should achieve this using AJAX instead of direct html code like this
var form = jQuery( '<div id="wmshortcodes-form"><table id="wmshortcodes-table" class="form-table">\
<tr>\
<th><label for="wmshortcodes-include">Strap Box Color</label></th>\
<td><input type="text" id="wmshortcodes-color" name="wmshortcodes-color" value="#123456" /></div><div id="picker"><br />\
<small>HEX Value</small>\
</td>\
</tr>\
</table>\
<p class="submit">\
<input type="button" id="wmshortcodes-submit" class="button-primary" value="Insert Shortcode" name="submit" />\
</p>\
</div>');


var table = form.find('table');
form.appendTo('body').hide();

form.find('#picker').farbtastic('#wmshortcodes-color');

// handles the click event of the submit button
form.find('#wmshortcodes-submit').click(function(){
// defines the options and their default values
// again, this is not the most elegant way to do this
// but well, this gets the job done nonetheless
var content = ed.selection.getContent();
var options = {
'color' : '#31373D'
};
var shortcode = '[wm_strap_box';

for( var index in options) {
var value = table.find('#wmshortcodes-' + index).val();

// attaches the attribute to the shortcode only if it's different from the default value
if ( value !== options[index] )
shortcode += ' ' + index + '="' + value + '"';
}

shortcode += '][/wm_strap_box]';


// inserts the shortcode into the active editor
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);

// closes Thickbox
tb_remove();
});
});
})()

Answers (1)

2012-06-05

Francisco Javier Carazo Gil answers:

Hi Kombajn,

Look at Sebastien answer into this question: http://wpquestions.com/question/showLoggedIn/id/3782

JS code can be helpful:


(function() {

tinymce.create('tinymce.plugins.super-form', {

init : function(ed, url) {

ed.addButton('super-form', {

title : 'Add a super-form',

image : url+'/image.png',

onclick : function() {

ed.selection.setContent('[super-form]');



}

});

},

createControl : function(n, cm) {

return null;

},

});

tinymce.PluginManager.add('super-form', tinymce.plugins.super-form);

})();