Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
Adding New Buttons to the Editor Toolbar
akanevsky
Join Date: Apr 2005
Posts: 3,972

by akanevsky akanevsky is offline 01 Oct 2005

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Standard vBulletin Button Separator, does not do anything except separating buttons.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And below add:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Views: 26129
Reply With Quote
Comments
  #2  
Old 01 Oct 2005, 18:29
Kirk Y's Avatar
Kirk Y Kirk Y is offline
 
Join Date: Apr 2005
Excellent! I'll definately be using this! Will this affect the Quick Reply box or would something different need to be edited?
__________________
Please feel free to re-use any of the code in any of my projects submitted to vB.org, so long as original attribution is retained.
Reply With Quote
  #3  
Old 04 Oct 2005, 04:57
ProperMethodz's Avatar
ProperMethodz ProperMethodz is offline
 
Join Date: Jan 2005
Real name: Richard Magnano
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!
Reply With Quote
  #4  
Old 23 Oct 2005, 03:34
o0Hubba0o's Avatar
o0Hubba0o o0Hubba0o is offline
 
Join Date: Mar 2005
Real name: Kevin
Originally Posted by ProperMethodz
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.
Reply With Quote
  #5  
Old 23 Oct 2005, 10:28
deathemperor's Avatar
deathemperor deathemperor is offline
 
Join Date: Jul 2003
Real name: Lucius Hunk
I thought when creating a new bbcode vbulletin let us insert a new button in the toolbar already ?
Reply With Quote
  #6  
Old 23 Oct 2005, 11:47
akanevsky akanevsky is offline
 
Join Date: Apr 2005
Real name: Anton Kanevsky
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.
__________________
I can no longer support any of my hacks. Please do not contact me for that. Feel free to create and post new versions of my hacks, as long as you give me credit for the original work.
Reply With Quote
  #7  
Old 11 Nov 2005, 12:13
Omranic's Avatar
Omranic Omranic is offline
 
Join Date: Jan 2005
Location: Egypt
Real name: Abdelrahman Omran
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
__________________
Me & My Productions: Omranic | vBulletin.org | Github | Premium PHP & vBulletin Solutions!
» ---------------------------------------------------------------------------- «
Keep Moving Forward!

Last edited by Omranic; 11 Nov 2005 at 12:18.
Reply With Quote
  #8  
Old 11 Nov 2005, 12:20
akanevsky akanevsky is offline
 
Join Date: Apr 2005
Real name: Anton Kanevsky
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.
__________________
I can no longer support any of my hacks. Please do not contact me for that. Feel free to create and post new versions of my hacks, as long as you give me credit for the original work.
Reply With Quote
  #9  
Old 11 Nov 2005, 13:15
Omranic's Avatar
Omranic Omranic is offline
 
Join Date: Jan 2005
Location: Egypt
Real name: Abdelrahman Omran
i do my best & try to make mmy own buttons & teel you the results ( am sure i'll need help )
__________________
Me & My Productions: Omranic | vBulletin.org | Github | Premium PHP & vBulletin Solutions!
» ---------------------------------------------------------------------------- «
Keep Moving Forward!
Reply With Quote
  #10  
Old 21 Nov 2005, 11:25
BoYagoob BoYagoob is offline
 
Join Date: Feb 2005
Great!
Thanks a lot
Reply With Quote
  #11  
Old 21 Dec 2005, 09:29
simsimt's Avatar
simsimt simsimt is offline
 
Join Date: Nov 2005
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Attached Images
File Type: gif editor.gif (5.4 KB, 400 views)
__________________
Freedom or the Deluge.

Last edited by simsimt; 21 Dec 2005 at 09:31.
Reply With Quote
  #12  
Old 21 Dec 2005, 23:00
cclaerhout's Avatar
cclaerhout cclaerhout is offline
 
Join Date: Aug 2004
Real name: Cédric Claerhout
A big thank for this nice tutorial Very usefull
Reply With Quote
  #13  
Old 26 Feb 2006, 21:48
DRJ DRJ is offline
 
Join Date: Jan 2005
I cannot seem to get this right. Maybe someone can see what I am doing wrong.

editor_toolbar_on

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

vbulletin_textedit.js


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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

Any ideas?

Thanks for you assistance.

Jake
Reply With Quote
  #14  
Old 06 Oct 2006, 00:29
Kungfu Kungfu is offline
 
Join Date: Dec 2005
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;
}
Reply With Quote
  #15  
Old 06 Oct 2006, 20:21
ericgtr's Avatar
ericgtr ericgtr is offline
 
Join Date: Apr 2003
Yet another useful tutorial, thanks PV.
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
Thread and Post Buttons for the Editor Toolbar akanevsky vBulletin 3.5 Add-ons 20 15 Oct 2007 12:41



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 07:05.

Layout Options | Width: Wide Color: