MyBB Community Forums

I know there are plugins to add a button to the editor. But these are not what i am looking for. I want to add a button that is basically a spoiler tag of "how to" images instructing how to use BBCode. 

in my codebutton template i have

<center>
	<button title="Need help with BBCode?" type="button" 
onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">BBCode help</button>

<div id="spoiler" style="display:none"> 

	
<br><br>
	<b><p><font size="6">Input code into python code tags...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/python_tag2.png"><br>
	
<br><br>
	<b><p><font size="6">Remove any formatted text from codebox...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/formatted_tag.png"><br>
Select all text to apply it to and then push the remove formatting button <br>
<img src="http://python-forum.io/images/screenshots/remove_format.png"><br>
<br><br>
	<b><p><font size="6">Input traceback errors into error tags...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/error_tag.png"><br>
	
<br><br>
	<b><p><font size="6">Input output into output tags...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/output_tag.png"><br>
<center><a href="http://python-forum.io/misc.php?action=help&hid=25" target="_blank">More BBCode Help</a><center>
</div> 
	</center>
<!--</div>-->
	
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/{$theme['editortheme']}" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/myinsertbuttons/mibutton.js?ver=3.0.0"></script>
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/myinsertcommand/myinsertcommand.css" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/myinsertcomma nd/insertcommand.js?ver=1.0.1"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/myinsertbuttons/mibutton.js?ver=3.0.0"></script>
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/myinsertcommand/myinsertcommand.css" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/myinsertcommand/insertcommand.js?ver=1.0.1"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/myinsertbuttons/mibutton.js?ver=3.0.0"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.bbcode.min.js?ver=1805"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/bbcodes_sceditor.js?ver=1804"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/editor_plugins/undo.js?ver=1805"></script>
<script type="text/javascript">
var newbutbar = newbutbar2 = '',
iclid = '{$mybb->settings['myinsertbuttons_imgurapi']}';
if (!'{$mybb->settings['myinsertbuttons_rules']}'.trim() == ''){
	newbut = '{$mybb->settings['myinsertbuttons_rules']}';
	newbutbar = ''+newbut+'|';
	icm_but_rls = newbut.split(',');
	for (var i = icm_but_rls.length-1; i >= 0; i--) {
		mibutton(''+icm_but_rls[i]+'',0);
		$(mibimage(''+icm_but_rls[i]+'')).insertAfter('textarea');
	}
}
if (!'{$mybb->settings['myinsertbuttons_rules_des']}'.trim() == ''){
	newbut2 = '{$mybb->settings['myinsertbuttons_rules_des']}';
	newbutbar2 = ''+newbut2+'|';
	icm_but_rls = newbut2.split(',');
	for (var i = icm_but_rls.length-1; i >= 0; i--) {
		mibutton(''+icm_but_rls[i]+'',1);
		$(mibimage(''+icm_but_rls[i]+'')).insertAfter('textarea');
	}
}
var insertbutton = '';
if (!'{$mybb->settings['myinsertcommand_rules']}'.trim() == ''){
	insertcommand('{$mybb->settings['myinsertcommand_rules']}');
	insertbutton = 'insert|';
}
var newbutbar = newbutbar2 = '',
iclid = '{$mybb->settings['myinsertbuttons_imgurapi']}';
if (!'{$mybb->settings['myinsertbuttons_rules']}'.trim() == ''){
	newbut = '{$mybb->settings['myinsertbuttons_rules']}';
	newbutbar = ''+newbut+'|';
	icm_but_rls = newbut.split(',');
	for (var i = icm_but_rls.length-1; i >= 0; i--) {
		mibutton(''+icm_but_rls[i]+'',0);
		$(mibimage(''+icm_but_rls[i]+'')).insertAfter('textarea');
	}
}
if (!'{$mybb->settings['myinsertbuttons_rules_des']}'.trim() == ''){
	newbut2 = '{$mybb->settings['myinsertbuttons_rules_des']}';
	newbutbar2 = ''+newbut2+'|';
	icm_but_rls = newbut2.split(',');
	for (var i = icm_but_rls.length-1; i >= 0; i--) {
		mibutton(''+icm_but_rls[i]+'',1);
		$(mibimage(''+icm_but_rls[i]+'')).insertAfter('textarea');
	}
}
var insertbutton = '';
if (!'{$mybb->settings['myinsertcommand_rules']}'.trim() == ''){
	insertcommand('{$mybb->settings['myinsertcommand_rules']}');
	insertbutton = 'insert|';
}
var newbutbar = newbutbar2 = '',
iclid = '{$mybb->settings['myinsertbuttons_imgurapi']}';
if (!'{$mybb->settings['myinsertbuttons_rules']}'.trim() == ''){
	newbut = '{$mybb->settings['myinsertbuttons_rules']}';
	newbutbar = ''+newbut+'|';
	icm_but_rls = newbut.split(',');
	for (var i = icm_but_rls.length-1; i >= 0; i--) {
		mibutton(''+icm_but_rls[i]+'',0);
		$(mibimage(''+icm_but_rls[i]+'')).insertAfter('textarea');
	}
	
}
if (!'{$mybb->settings['myinsertbuttons_rules_des']}'.trim() == ''){
	newbut2 = '{$mybb->settings['myinsertbuttons_rules_des']}';
	newbutbar2 = ''+newbut2+'|';
	icm_but_rls = newbut2.split(',');
	for (var i = icm_but_rls.length-1; i >= 0; i--) {
		mibutton(''+icm_but_rls[i]+'',1);
		$(mibimage(''+icm_but_rls[i]+'')).insertAfter('textarea');
	}
}
var partialmode = {$mybb->settings['partialmode']},
opt_editor = {
	plugins: "bbcode,undo",
	style: "{$mybb->asset_url}/jscripts/sceditor/textarea_styles/jquery.sceditor.{$theme['editortheme']}",
	rtl: {$lang->settings['rtl']},
	locale: "mybblang",
	enablePasteFiltering: true,
	autoUpdate: true,
	emoticonsEnabled: {$emoticons_enabled},
	emoticons: {
		// Emoticons to be included in the dropdown
		dropdown: {
			{$dropdownsmilies}
		},
		// Emoticons to be included in the more section
		more: {
			{$moresmilies}
		},
		// Emoticons that are not shown in the dropdown but will still be converted. Can be used for things like aliases
		hidden: {
			{$hiddensmilies}
		}
	},
	emoticonsCompat: true,
	toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|"+insertbutton+""+newbutbar+newbutbar2+"maximize,source",
};

{$editor_language}
$(function() {
	$("#{$bind}").sceditor(opt_editor);

	MyBBEditor = $("#{$bind}").sceditor("instance");
	{$sourcemode}
});
</script>

the top code between the center tags is my addition.

<center>
	<button title="Need help with BBCode?" type="button" 
onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">BBCode help</button>

<div id="spoiler" style="display:none"> 

	
<br><br>
	<b><p><font size="6">Input code into python code tags...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/python_tag2.png"><br>
	
<br><br>
	<b><p><font size="6">Remove any formatted text from codebox...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/formatted_tag.png"><br>
Select all text to apply it to and then push the remove formatting button <br>
<img src="http://python-forum.io/images/screenshots/remove_format.png"><br>
<br><br>
	<b><p><font size="6">Input traceback errors into error tags...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/error_tag.png"><br>
	
<br><br>
	<b><p><font size="6">Input output into output tags...</font></p></b><br>
<img src="http://python-forum.io/images/screenshots/output_tag.png"><br>
<center><a href="http://python-forum.io/misc.php?action=help&hid=25" target="_blank">More BBCode Help</a><center>
</div> 
	</center>

I would like to put this (minus the center and modified to fit the same size as the other bbcode buttons) with the other BBcode buttons.