vBulletin: How to add more buttons to quick reply box toolbar?

When people are replying to a thread, going advanced editing would require an extra click as well as page loading time — very inconvenient. However, at gotalk.org, users would generally want to post a lot of code because it’s a programming language forum in nature. But vBulletin doesn’t come with a CODE button in the quick reply editor toolbar by default.

So I’ll have to add the CODE button to the quick reply box myself.

How to add extra buttons to the toolbar of the quick reply editor? (v4.1.2)

Just copy and paste the buttons code from the advanced editor to the quick reply editor. The advanced editor template is “editor_toolbar_on” while that of the quick reply editor is “showthread_quickreply“. All we have to do is to copy some code from “editor_toolbar_on” to “showthread_quickreply“.

In the example below, I’ll add the CODE button from the advanced editor to the quick reply editor. You can add other buttons to the quick reply box in similar steps.

1. Open “editor_toolbar_on” template

From /admincp, Styles & Templates –> Style Manager –> click “Search in Templates” –> in the “Search for Text” box, enter “editor_toolbar_on” –> click “Find” –> double click “editor_toolbar_on” in the left selection.

2. Open “showthread_quickreply” template

From /admincp, Styles & Templates –> Style Manager –> click “Search in Templates” –> in the “Search for Text” box, enter “showthread_quickreply” –> click “Find” –> double click “showthread_quickreply” in the left selection.

3. Find the code for CODE button in the “editor_toolbar_on” template

Simply search for:

$show['code_bbcode']

In the “editor_toolbar_on” template and you would find a code block like this:

<vb:if condition="$show['code_bbcode'] OR $show['html_bbcode'] OR $show['php_bbcode']"> <li> <vb:if condition="$show['code_bbcode']"><img src="{vb:stylevar imgdir_editor}/code.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_code" width="20" height="20" alt="{vb:rawphrase wrap_code_tags}" /></vb:if> <vb:if condition="$show['html_bbcode']"><img src="{vb:stylevar imgdir_editor}/html.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_html" width="20" height="20" alt="{vb:rawphrase wrap_html_tags}" /></vb:if> <vb:if condition="$show['php_bbcode']"><img src="{vb:stylevar imgdir_editor}/php.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_php" width="20" height="20" alt="{vb:rawphrase wrap_php_tags}" /></vb:if> </li> </vb:if>

Copy this code block, and switch to the “showthread_quickreply” template.

4. Add the code in the “showthread_quickreply” template

Search for:

$show['quote_bbcode']

And you would find the code for the QUOTE button:

<vb:if condition="$show['quote_bbcode']"> <li class="editor_control_group_item"> <img src="{vb:stylevar imgdir_editor}/quote.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_quote" width="20" height="20" alt="{vb:rawphrase wrap_quote_tags}" /> </li> </vb:if>

Immediately below the QUOTE button block, paste what you just copied from the “editor_toolbar_on” template, and add a class=”editor_control_group_item” to the <li> element:

<vb:if condition="$show['quote_bbcode']"> <li class="editor_control_group_item"> <img src="{vb:stylevar imgdir_editor}/quote.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_quote" width="20" height="20" alt="{vb:rawphrase wrap_quote_tags}" /> </li> </vb:if> <vb:if condition="$show['code_bbcode'] OR $show['html_bbcode'] OR $show['php_bbcode']"> <li class="editor_control_group_item"> <vb:if condition="$show['code_bbcode']"><img src="{vb:stylevar imgdir_editor}/code.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_code" width="20" height="20" alt="{vb:rawphrase wrap_code_tags}" /></vb:if> <vb:if condition="$show['html_bbcode']"><img src="{vb:stylevar imgdir_editor}/html.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_html" width="20" height="20" alt="{vb:rawphrase wrap_html_tags}" /></vb:if> <vb:if condition="$show['php_bbcode']"><img src="{vb:stylevar imgdir_editor}/php.png" class="imagebutton" id="{vb:raw editorid}_cmd_wrap0_php" width="20" height="20" alt="{vb:rawphrase wrap_php_tags}" /></vb:if> </li> </vb:if>

Click “Save” or “Save and Reload“. Done!

Now refresh any thread page and you’ll see the CODE button as well as the HTML code button and PHP code button are all added to the toolbar of the quick reply editor. Following the same steps, you can add other buttons from the advanced editor to the quick reply editor.

(This is for vBulletin 4.1.2)