Adding New Buttons to the Editor Toolbar

[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

PHP Code:

        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 [VBA][/VBA]. 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 then right when i hit space or what not it would change the 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


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




i make your method

but the code run like that

"url"

instead of

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



how to get that please???


thanks

[Flygye]

Originally Posted by cuphongle

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