| 1 |
// closure to avoid namespace collision |
| 2 |
(function(){ |
| 3 |
// creates the plugin |
| 4 |
tinymce.create('tinymce.plugins.bwbutton', { |
| 5 |
// creates control instances based on the control's id. |
| 6 |
// our button's id is "bwbutton_button" |
| 7 |
createControl : function(id, controlManager) { |
| 8 |
if (id == 'bwbutton_button') { |
| 9 |
// creates the button |
| 10 |
var button = controlManager.createButton('bwbutton_button', { |
| 11 |
title : 'oik Button Shortcode', // title of the button |
| 12 |
image : '../wp-content/plugins/oik/bw-bn-icon.gif', |
| 13 |
onclick : function() { |
| 14 |
// triggers the thickbox |
| 15 |
var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width; |
| 16 |
W = W - 80; |
| 17 |
H = H - 84; |
| 18 |
tb_show( 'oik Button', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=bwbutton-form' ); |
| 19 |
} |
| 20 |
}); |
| 21 |
return button; |
| 22 |
} |
| 23 |
return null; |
| 24 |
} |
| 25 |
}); |
| 26 |
|
| 27 |
// registers the plugin. DON'T MISS THIS STEP!!! |
| 28 |
tinymce.PluginManager.add('bwbutton', tinymce.plugins.bwbutton); |
| 29 |
|
| 30 |
// executes this when the DOM is ready |
| 31 |
jQuery(function(){ |
| 32 |
// creates a form to be displayed everytime the button is clicked |
| 33 |
// you should achieve this using AJAX instead of direct html code like this |
| 34 |
var form = jQuery('<div id="bwbutton-form"><table id="bwbutton-table" class="form-table">\ |
| 35 |
<tr>\ |
| 36 |
<th><label for="bwbutton-link">link</label></th>\ |
| 37 |
<td><input link="text" name="link" id="bwbutton-link" value="" /><br />\ |
| 38 |
<small>specify the URL e.g. /contact </small></td>\ |
| 39 |
</tr>\ |
| 40 |
<tr>\ |
| 41 |
<th><label for="bwbutton-text">text</label></th>\ |
| 42 |
<td><input link="text" name="text" id="bwbutton-text" value="" /><br />\ |
| 43 |
<small>specify the text for the button</small>\ |
| 44 |
</tr>\ |
| 45 |
<tr>\ |
| 46 |
<th><label for="bwbutton-title">title</label></th>\ |
| 47 |
<td><input link="text" name="title" id="bwbutton-title" value="" /><br />\ |
| 48 |
<small>specify the text when hovering over the button</small></td>\ |
| 49 |
</tr>\ |
| 50 |
<tr>\ |
| 51 |
<th><label for="bwbutton-class">class</label></th>\ |
| 52 |
<td><input link="text" name="class" id="bwbutton-class" value="" /><br />\ |
| 53 |
<small>specify any additional CSS classes</small></td>\ |
| 54 |
</tr>\ |
| 55 |
</table>\ |
| 56 |
<p class="submit">\ |
| 57 |
<input link="button" id="bwbutton-submit" class="button-primary" value="Insert Button" name="submit" />\ |
| 58 |
</p>\ |
| 59 |
</div>'); |
| 60 |
|
| 61 |
var table = form.find('table'); |
| 62 |
form.appendTo('body').hide(); |
| 63 |
|
| 64 |
// handles the click event of the submit button |
| 65 |
form.find('#bwbutton-submit').click(function(){ |
| 66 |
// defines the options and their default values |
| 67 |
// again, this is not the most elegant way to do this |
| 68 |
// but well, this gets the job done nonetheless |
| 69 |
//'shipcost' : '', |
| 70 |
//'shipcost2' : '', |
| 71 |
//'weight' : '' |
| 72 |
|
| 73 |
var options = { |
| 74 |
'link' : '', |
| 75 |
'text' : '', |
| 76 |
'title' : '', |
| 77 |
'class' : '', |
| 78 |
}; |
| 79 |
var shortcode = '[bw_button'; |
| 80 |
|
| 81 |
for( var index in options) { |
| 82 |
var value = table.find('#bwbutton-' + index).val(); |
| 83 |
|
| 84 |
// attaches the attribute to the shortcode only if it's different from the default value |
| 85 |
if ( value !== options[index] ) |
| 86 |
shortcode += ' ' + index + '="' + value + '"'; |
| 87 |
} |
| 88 |
|
| 89 |
shortcode += ']'; |
| 90 |
|
| 91 |
// inserts the shortcode into the active editor |
| 92 |
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode); |
| 93 |
|
| 94 |
// closes Thickbox |
| 95 |
tb_remove(); |
| 96 |
}); |
| 97 |
}); |
| 98 |
})() |
