vBulletin LTS

← Back to Programming Articles

Add A Button To The Editor (vb3)
by cirisme 18 Jan 2004
This will help you add an extra button to vb3's editor toolbar. The button calls a function that you define in vbulletin_global.js that can do anything you want. Originally posted here.

Spoiler (click to open)


Quote by zozex
Hi

how can i add a button to the WYSIWYG editor like a real one player button so the song or whatever will be played in the thread like the old tool bar

and thank you


* sorry for the bad english *
Open ./includes/functions_editor.php and find this:

PHP Code:
    global $datastore, $bbcodecache; 
And change to:

PHP Code:
    global $datastore, $bbcodecache, $stylevar; 
Find this

PHP Code:
    foreach ($bbcodecache AS $bbcode)
      {
          if ($bbcode['buttonimage'] != '')
          {
              $tag = strtoupper($bbcode['bbcodetag']);
  
              if ($toolbartype == 2)
              {
              $extrabuttons .= "<td><div class=\"imagebutton\" id=\"cmd_wrap$bbcode[twoparams]_$bbcode[bbcodetag]\"><img src=\"$bbcode[buttonimage]\" alt=\"Wrap [$tag] Tags\" width=\"21\" height=\"20\" /></div></td>\n";
              }
              else
              {
              $extrabuttons .= "<td><div class=\"imagebutton\"><a href=\"#\" onclick=\"return vbcode('$tag', '')\"><img src=\"$bbcode[buttonimage]\" alt=\"Wrap [$tag] Tags\" title=\"Wrap [$tag] Tags\" width=\"21\" height=\"20\" border=\"0\" /></a></div></td>\n";
              }
          }
      } 
And add this below:

Code:
	if ($toolbartype == 2){
  		$extrabuttons .= '<td><div class="imagebutton" id="cmd_realone"><img src="' . $stylevar[imgdir_editor] . '/realone.gif" alt="Real One" width="21" height="20" /></div></td>';
  	}else{
 		$extrabuttons .= '<td><div class="imagebutton"><a href="#" onclick="return realone()"><img src="' . $stylevar[imgdir_editor] . '/realone.gif" alt="Real One" title="Real One" width="21" height="20" border="0" /></a></div></td>';
  	}
Be sure to change the bolded realone to be whatever you want it to be.(leaving it as is is fine... just be sure to upload a realone.gif file to your editor images dir)

Now, open clientscript/vbulletin_wysiwyg.js and find this:

Code:
		    htmlbox.execCommand(formatcommand, showinterface, extraparameters);
  			set_context(formatcommand);
And REPLACE with:

Code:
		if(formatcommand == 'realone') {
  			realone();
  		}else{
  			// this was original but outside IF
 			htmlbox.execCommand(formatcommand, showinterface, extraparameters);
  			set_context(formatcommand);
  		}
And open clientscript/vbulletin_global.js and add a function called realone to do whatever you want it to do and you'll be set. It's quite easy actually

Close


Open ./includes/functions_editor.php and find this:

PHP Code:
    global $datastore, $bbcodecache; 
And change to:

PHP Code:
    global $datastore, $bbcodecache, $stylevar; 
Find this

PHP Code:
    foreach ($bbcodecache AS $bbcode)
         {
             if ($bbcode['buttonimage'] != '')
             {
                 $tag = strtoupper($bbcode['bbcodetag']);
     
                 if ($toolbartype == 2)
                 {
              $extrabuttons .= "<td><div class=\"imagebutton\" id=\"cmd_wrap$bbcode[twoparams]_$bbcode[bbcodetag]\"><img src=\"$bbcode[buttonimage]\" alt=\"Wrap [$tag] Tags\" width=\"21\" height=\"20\" /></div></td>\n";
                 }
                 else
                 {
              $extrabuttons .= "<td><div class=\"imagebutton\"><a href=\"#\" onclick=\"return vbcode('$tag', '')\"><img src=\"$bbcode[buttonimage]\" alt=\"Wrap [$tag] Tags\" title=\"Wrap [$tag] Tags\" width=\"21\" height=\"20\" border=\"0\" /></a></div></td>\n";
                 }
             }
         } 
And add this below:

Code:
	if ($toolbartype == 2){
     		$extrabuttons .= '<td><div class="imagebutton" id="cmd_xxxx"><img src="' . $stylevar[imgdir_editor] . '/xxxx.gif" alt="<Alt Text>" width="21" height="20" /></div></td>';
     	}else{
 		$extrabuttons .= '<td><div class="imagebutton"><a href="#" onclick="return xxxx()"><img src="' . $stylevar[imgdir_editor] . '/xxxx.gif" alt="<Alt Text>" title="<Alt Text>" width="21" height="20" border="0" /></a></div></td>';
     	}
Be sure to change the bolded xxxx to be whatever you want it to be.

Now, open clientscript/vbulletin_wysiwyg.js and find this:

Code:
		 htmlbox.execCommand(formatcommand, showinterface, extraparameters);
     			set_context(formatcommand);
And REPLACE with:

Code:
		if(formatcommand == 'xxxx') {
     			xxxx();
     		}else{
     			// this was original but outside IF
 			htmlbox.execCommand(formatcommand, showinterface, extraparameters);
     			set_context(formatcommand);
     		}
Be sure to change the xxxx's above to be the same as in the other code snippet.

And open clientscript/vbulletin_global.js and add a function called whatever you changed xxxx to. It can do whatever you want it to do and you'll be set.

If you want to add it to the showthread quick reply... open showthread.php and find:

PHP Code:
    eval('$quickreply = "' . fetch_template('showthread_quickreply') . '";'); 
And replace with:

PHP Code:
    $extrabuttons        = construct_editor_extra_buttons($WYSIWYG);
      eval('$quickreply = "' . fetch_template('showthread_quickreply') . '";'); 
In the showthread_quickreply template find this:

HTML Code:
		<td><div class="imagebutton" id="cmd_wrap0_quote"><img src="$stylevar[imgdir_editor]/quote.gif" alt="$vbphrase[wrap_quote_tags]" width="21" height="20" /></div></td>
And add this below:

HTML Code:
		<if condition="$extrabuttons"><td>$extrabuttons</td></if>
Find this:

HTML Code:
		<td><div class="imagebutton"><a href="#" onclick="return vbcode('QUOTE', '')"><img src="$stylevar[imgdir_editor]/quote.gif" alt="$vbphrase[wrap_quote_tags]" title="$vbphrase[wrap_quote_tags]" width="21" height="21" border="0" /></a></div></td>
And add below:

HTML Code:
		<if condition="$extrabuttons"><td>$extrabuttons</td></if>
Done!

vblts.ru supports vBulletin®, 2022-2024