Adding New Buttons to the Editor Toolbar

[akanevsky]

Start by opening the editor_toolbar_on template.
That is the only template you need to edit, since in vBulletin this same template corresponds to both the standard editor and the wysiwig.

Find:
$vBeditTemplate[extrabuttons]

Before that row is where you should add buttons. However, you can add them anywhere you want if you know what you are doing.

Now about the buttons themselves:

<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
Standard vBulletin Button Separator, does not do anything except separating buttons.

<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_BBCODE"><img src="$stylevar[imgdir_editor]/YOURBUTTONIMAGE" width="21" height="20" alt="$vbphrase[YOURALTPHRASE]" /></div></td>
BBCODE - this part is what defines the bbcode to be insterted. Whatever you put instead of "BBCODE" goes into the square tag brackets.
YOURBUTTONIMAGE and YOURALTPHRASE are respectively the image and the descriptive phrase for that image.
You can also change the width of the image, but everything else should not be touched - esspecially the DIV ID (except the BBCODE part).

So far so good. But this does not allow a user to define a parameter for the bbcode tag.
To fix, open vbulletin_textedit.js located in clientscript folder, and find:

case 'PHP':
{
this.apply_format('removeformat');
}

And below add:

case 'BBCODE':
{
useoption = true;
}

Where BBCODE, of course, is the same bbcode you added earlier. Must be capitalized.

Done!

If anyone wants to add some information on how to make the buttons perform your own functions, do it.

[Kirk Y]

Excellent! I'll definately be using this! Will this affect the Quick Reply box or would something different need to be edited?

[ProperMethodz]

yay! I did this before and didn't know what the hell I was doing! I added a glow button.

Actually... If I remember correctly there is an area in the ADMINCP that allows you to do this automatically.

Regardless, this is sick because it now shows me the code effected.

Thanks!

[o0Hubba0o]

yay! I did this before and didn't know what the hell I was doing! I added a glow button.

When you add bbcode through the bbcode manager the last option is:
Button Image (Optional) If you would like this bbcode to appear as a clickable button on the message editor toolbar, enter the URL of an image 21 x 20 pixels in size that will act as the button to insert this bbcode.

But like you said it's nice to where this is affected.

[deathemperor]

I thought when creating a new bbcode vbulletin let us insert a new button in the toolbar already ?

[akanevsky]

Yes, it does.

But:
- You cannot use it for pre-existing bbcodes, such as thread and post
- You cannot use it for CUSTOM hardcoded bbcodes, such as ones found in my [HIDE] hack.

[Omranic]

ok thats very nice
but how can I make my bbcode converted or displayed right in both standard & wysiwig editors ?
& is the bbcode manager in admincp can replace the js file editing ?

sory but i didn't understand the role of this file editing & i'm new to the tool box 3.5

[akanevsky]

The role of file editing: It tells the script that the tag has an OPTION, which makes it pop up the input box.
When you do the template edit, it works for both standard and wysiwyg editors.

[Omranic]

i do my best & try to make mmy own buttons & teel you the results ( am sure i'll need help :) )

[BoYagoob]

Great!
Thanks a lot :)

[simsimt]

I've added a custom BB code at my board which justifies text equally to margin. I did that through the Admin CP's BB Code Manager. I put a one line code:
<div align=justify>{param}</div>
then designed a 21 x 20 button image for it.

Everything goes alright & the text was showing justified correctly without any problems. But, when I switch to the advanced mode (WYSIWYG) & selecting some text to justify it, it only show between the [justify][justify/] tags! (though they then justified correctly in the post).

My question is: how can I make that BB code takes effect "visually" as a "WYSIWYG"?

Also, how can I place the button image in other place in the editor interface? By default, it's added to the right (See the attached image).

I have to say that I asked these questions at vBulletin.com & I were told they simply can't be done! I got a little disappointed for I thought these were simple things to customize in vBulletin.

[cclaerhout]

A big thank for this nice tutorial :) Very usefull

[DRJ]

I cannot seem to get this right. Maybe someone can see what I am doing wrong.

editor_toolbar_on

<if condition="$show['php_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><img src="$stylevar[imgdir_editor]/php.gif" width="21" height="20" alt="$vbphrase[wrap_php_tags]" /></div></td>
</if>

<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_VBA"><img src="$stylevar[imgdir_editor]/vba.gif" width="21" height="20" alt="Wrap [VBA] tags" /></div></td>
$vBeditTemplate[extrabuttons]
</tr>
</table>


vbulletin_textedit.js


switch (tagname)
{
case 'CODE':
case 'HTML':
case 'PHP':
{
this.apply_format('removeformat');
}
case 'VBA':
{
useoption = true;
}

break;
}

It is a code for VBA formatting, and I just need the button to wrap the text in . But with these changes there is nothing on the toolbar.

Any ideas?

Thanks for you assistance.

Jake

[Kungfu]

Nice tut, got me on the right track. Im making a custom function for a button. So just a side not if you want to make a function do a return false; at the end, this way it wont add the bbcode.

case 'Function':
{
put your code here and what not then
like you want to create a popup window or whatever you want to do here.
return false;
}

[ericgtr]

Yet another useful tutorial, thanks PV. :)

[Kungfu]

Anyone know how to make a button when you can press it and it will check to see for a change. I need to be able to do this so say your typing and i want to check for a change, or i want to see when someone is typing. Would it be possible to check what they are typing. I want to be able to do this so i can check for certain things that people type and then have my function change something about it.

Kind of like if someone were to type :o then right when i hit space or what not it would change the :o to something else.

I basically just need to know how to check on change as i know how to get the text from the text box.


Another thing how do you move the cursor to the last position. Thats another thing i cant seem to figure out.

Thanks.

[Luggruff]

How would you go on to make a dropdown, like the smileybox? Would like one of those for ALL my custom BB-codes, as they just takes up space :P

[cuphongle]

how do we add Hiden and Center button to Editor tool bar??
can some1 gimme a code please
thx u

[baghdad4ever]

hi

i want to add new editor button to insert flash (.swf file) when make new thread

ie:

button when press it, popup window come with box to put url in it and ask me for hight and width

and finally run this code


url[/COLOR]] WIDTH=450 HEIGHT=250




i make your method

but the code run like that

"url"

instead of

url[/COLOR]] WIDTH=450 HEIGHT=250



how to get that please???


thanks

[Flygye]

how do we add Hiden and Center button to Editor tool bar??
can some1 gimme a code please
thx u

i'm have the same question..

anyone please can help us.

and a button for put the flash too :)

tnhks:)

[Digital Jedi]

Has anyone updated this method for 3.7? The javascript file is somewhat different now, and none of my old template edits are visible since upgrading from 3.6.x. I tried editing the JS file right around the same code. Even picked it up and shook it real hard, but nothing worked.

[Digital Jedi]

Just to answer my own question and to put it here for search purposes, the reason my buttons weren't showing is because I had a modification that moved smilies below the editor and the mod forces your styles to use it's own templates rather then standard templates. I had to edit the modification's templates instead.

[MTGDarkness]

How 'bout adding buttons to the quick reply editor?

[rrudeboy]

this is my code:

<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_strike"><img src="$stylevar[imgdir_editor]/strikethrough.gif" width="21" height="20" alt="$vbphrase[strike]" /></div></td>

which works, but it does not show the alt text..

[baghdad4ever]

how to add flash button ???

ie: button from which we can insert swf url plus width and hight

thanks

[Gargi]

Since I see everything in one line I changed the vbulletin_textedit.js (version 3.8.3) this way:

Search for

case"PHP":this.apply_format("removeformat");break}

I inserted my code this way:

{case"CODE":case"HTML":case"PHP":this.apply_format("removeformat");break;case"BBCODE":useoption=true;break;}

cu
Gargi

[rigodiaz]

Thank you.

[sulasno]

Yes, it does.

But:
- You cannot use it for pre-existing bbcodes, such as thread and post
- You cannot use it for CUSTOM hardcoded bbcodes, such as ones found in my [HIDE] hack.

exactly what I am looking for

How do I add buttons for thread, post and highlight ?

[Digital Jedi]

exactly what I am looking for

How do I add buttons for thread, post and highlight ?
He explains how to do that in the tutorial. Look closely at the instructions after you add the line of code.

[Peter Lo]

This method doesn't seem to work with vb4.02; I can't locate "$vBeditTemplate[extrabuttons]" in the editor_toolbar_on template.

[ArchAngelz]

Any update of this for vb4?

[RobDog888]

Im looking to add my bbcode button to the quick reply and quick edit but nothing found yet.

[jackaninny]

Love to see this updated for VB4

[VBIran]

Update this to vbulletin 4..

[Ludens]

Create a BBCODE and name it "justify"


Templates to edit: editor_toolbar_on

look for:
<vb:if condition="$stylevar['textdirection'] == 'ltr'">


there you will have:

<img src="{vb:stylevar imgdir_editor}/justifyleft.png" class="imagebutton" id="{vb:raw editorid}_cmd_justifyleft" width="20" height="20" alt="{vb:rawphrase align_left}" />

<img src="{vb:stylevar imgdir_editor}/justifycenter.png" class="imagebutton" id="{vb:raw editorid}_cmd_justifycenter" width="20" height="20" alt="{vb:rawphrase align_center}" />

<img src="{vb:stylevar imgdir_editor}/justifyright.png" class="imagebutton" id="{vb:raw editorid}_cmd_justifyright" width="20" height="20" alt="{vb:rawphrase align_right}" />


just add this behind:

<img src="{vb:stylevar imgdir_editor}/justify.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_justify" width="20" height="20" alt="Wrap [JUSTIFY] tags around selected text" />


repeat step for "else" part of the same "if" condition


just note that name of BBCODE and id of an image are same id="{vb:raw editorid}_cmd_wrap0_justify

[fly]

^That template isn't available on 4.15^

Assuming you were posting that as a solution for vB4...

[emperatour]

It appears like the new editor no longer uses "editor_toolbar_on" template.... :(

[cowcowcow]

Using VB3.8

Ive got 20 extra bbcode buttons and the layout just extends horizontally forever, anyone know where to put a linebreak between? Where exactly would i put it?

Alternatively i could center my interface if i knew how to

https://vborg.vbsupport.ru/[/URL] Uploaded with ImageShack.us (http://imageshack.us)[/IMG]

thanks!

[bigs15]

Having error after editing the template

Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting ']' in
/includes/adminfunctions_template.php(3941) : eval()'d code on line 154

[Digital Jedi]

Using VB3.8

Ive got 20 extra bbcode buttons and the layout just extends horizontally forever, anyone know where to put a linebreak between? Where exactly would i put it?

Alternatively i could center my interface if i knew how to

http://img841.imageshack.us/img841/8752/editorhelp.png (http://imageshack.us/photo/my-images/841/editorhelp.png/) Uploaded with ImageShack.us (http://imageshack.us)

thanks!
You're adding cells to a table when adding them to the editor. So what you need to do is start a new table row, rather than a line break.

<table>
<!-- TR starts a new table row -->
<tr>
<td>Table Cell Contents</td>
<td>Table Cell Contents</td>
</tr>
<!-- TR starts a new table row -->
<tr>
<td>Table Cell Contents</td>
<td>Table Cell Contents</td>
</tr>
</table>

There need to be an equal number of table cells on each row, or your table will be lopsided. Even if the cells are empty, just a <td></td> will work.

Also, looks to me like you or a modification have made additional edits to your editor template. So you would need to make certain the HTML is correct here before attempting to try and center anything.


Having error after editing the template

Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting ']' in
/includes/adminfunctions_template.php(3941) : eval()'d code on line 154
You're code is constructed improperly. You've left out something like a ] that PHP was expecting to be there. You need to double check your work closely, or revert the template and start over all the custom edits from scratch.

[bigs15]

You're code is constructed improperly. You've left out something like a ] that PHP was expecting to be there. You need to double check your work closely, or revert the template and start over all the custom edits from scratch.

Yes i was adding space in YOURALTPHRASE after removing spaces it went okay.Thank you

[Toorak Times]

Hi guys,

I am desperate for a Justify option for my 4.2.1 site, trying to be a newspaper isn't easy these days!!!