Page 1 of 1

[SOLVED] Adding a BBCode button

PostPosted: Fri Feb 02, 2007 12:46 pm
Author: Dioncecht
Your phpBB Version: 2.0.
phpBB Type: Integramod 141
MODs: Yes
Your knowledge: Beginner
Board URL: [url]http://[/url]

PHP Version:
MySQL Version:


What was done before the problem appeared?



What was done to try to solve the problem?




De.scription and Message

I want to add a button to BBCode that adds [ dice ] [ /dice ] to highlighted text. I already have the code in and working so that if I manually type that bb code in it works, I just need a button next to the table button that adds that code.

Re: Adding a BBCode button

PostPosted: Fri Feb 02, 2007 9:39 pm
Author: Frost
There is a really good tutorial on how to do this [url=http]HERE[/url]

or you can post your templates/Your_Template_Name/posting_body.tpl and I'll walk you through it

Re: Adding a BBCode button

PostPosted: Sat Feb 03, 2007 11:31 am
Author: Dioncecht
Thanks, but that didn't work. The tutorial is for adding BBCode button on a phpbb board and Integra is alot different. I actually got the button to show up, but clicking on it does absolutly nothing. The help line doesn't even show up. The only thing that works about it is the button shows up and the ALT text works, thats it.

The tutorial says to look for "bbtags = new Array( " in posting_body.tpl but no such thing exists in that tpl file. Here is my posting_body.tpl

Code: Select all
<script></script><script></script>  <script></script><script>   var is_event_allowed = 0;   var is_delayed_allowed = 0;     function checkForm2() {     formErrors = false;           if (document.post.message.value.length < 2) {         formErrors = "You must enter a message when posting";     }     if (is_event_allowed && is_delayed_allowed){         if (document.post.calendar_event.value && document.post.forcetime.value)         {             alert("A calendar event can't be posted as a delayed topic");             return false;         }     }     if (is_event_allowed) {         if (!document.post.calendar_event.value && document.post.topic_calendar_repeats_value.value != 0)         {             alert("A repeating event must have a calendar event specified");             return false;         }     }if (formErrors) {         alert(formErrors);         return false;     } else if (is_submit) {         alert('Your post is already submitted');       return false;     } else {         is_submit = true;     }     return true;}</script><style>.postimage {     cursor]http://www.HVMDesign.com[/url]" target="blank">Advanced BBCode Box v5.0.0</a> </td>                             </tr>                         </table>                     </td>                     <td><img></td>                 </tr>                 <tr>                     <td><img></td>                     <td>                         <table>                             <tr>                                 <td><img></td>                                 <td>                                     <select>                                         <option>Font type</option>                                         <option>Arial</option>                                         <option>Arial Black</option>                                         <option>Century Gothic</option>                                         <option>Comic Sans MS</option>                                         <option>Courier New</option>                                         <option>Georgia</option>                                         <option>Lucida Console</option>                                         <option>Microsoft Sans Serif</option>                                         <option>Symbol</option>                                         <option>Tahoma</option>                                         <option>Trebuchet</option>                                         <option>Times New Roman</option>                                         <option>Verdana</option>                                     </select>                                     <select>                                         <option>Font Size</option>                                         <option>{L_FONT_TINY}</option>                                         <option>{L_FONT_SMALL}</option>                                         <option>{L_FONT_NORMAL}</option>                                         <option>{L_FONT_LARGE}</option>                                         <option>{L_FONT_HUGE}</option>                                     </select>                                     <select>                                         <option>Font Color</option>                                         <option>{L_COLOR_RED}</option>                                         <option>{L_COLOR_ORANGE}</option>                                         <option>{L_COLOR_BROWN}</option>                                         <option>{L_COLOR_YELLOW}</option>                                         <option>{L_COLOR_GREEN}</option>                                         <option>{L_COLOR_OLIVE}</option>                                         <option>{L_COLOR_CYAN}</option>                                         <option>{L_COLOR_BLUE}</option>                                         <option>{L_COLOR_DARK_BLUE}</option>                                         <option>{L_COLOR_INDIGO}</option>                                         <option>{L_COLOR_VIOLET}</option>                                         <option>{L_COLOR_WHITE}</option>                                         <option>{L_COLOR_BLACK}</option>                                     </select>                                 </td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                             </tr>                         </table>                     </td>                     <td><img></td>                 </tr>                 <tr>                     <td><img></td>                     <td>                         <table>                             <tr>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                             </tr>                         </table>                     </td>                     <td><img></td>                 </tr>                 <tr>                     <td><img></td>                     <td>                         <table>                             <tr>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 <td><img></td>                                 </tr>                         </table>                     </td>                     <td><img></td>                 </tr>                 <tr>                     <td><img></td>                     <td>                         <table>                             <tr>                                 <td><img></td>                                 <td><input></td>                             </tr>                         </table>                     </td>                     <td><img></td>                 </tr>                 <tr>                     <td><textarea>{MESSAGE}</textarea></td>                 </tr><BEGIN>     <tr>         <td><br><br>{CONFIRM_IMAGE}<br><br></td>     </tr>     <tr>       <td><span><b>{L_CT_CONFIRM}</b></span><br><span>{L_CT_CONFIRM_E}</span><br><br><input>{S_HIDDEN_FIELDS}</td>     </tr><END>                 <tr>                     <td>{S_HIDDEN_FORM_FIELDS}                         <input>                           <input>                     </td>                 </tr>                             </table>         </td>     </tr></table>    </td></tr><tr><td><span>{L_OPTIONS}:</span><br><span>{HTML_STATUS}<br>{BBCODE_STATUS}<br>{SMILIES_STATUS}</span></td><td> <table><BEGIN><tr><td><input></td><td>{L_DISABLE_HTML}</td></tr><END><BEGIN><tr><td><input></td><td>{L_DISABLE_BBCODE}</td></tr><END><BEGIN><tr><td><input></td><td>{L_DISABLE_SMILIES}</td></tr><END><BEGIN><tr><td><input></td><td>{L_ATTACH_SIGNATURE}</td></tr><END><BEGIN><tr> <td> <input></td><td><span>{L_SET_BOOKMARK}</span></td></tr><END><BEGIN><tr><td><input></td><td>{L_NOTIFY_ON_REPLY}</td></tr><END><BEGIN><tr><td><input></td><td>{L_DELETE_POST}</td></tr><END><BEGIN><tr> <td> <input></td><td><span>{L_LOCK_TOPIC}</span></td></tr><END><BEGIN><tr> <td> <input></td><td><span>{L_UNLOCK_TOPIC}</span></td></tr><END><BEGIN><style>@import url({TEMPLATE_PATH}calendar.css);</style><script></script><script></script><script></script><script>   is_event_allowed = 1;</script><tr><td><hr></td></tr><tr><td></td><td><table><tr><td><span><b>{L_CALENDAR_TITLE} :</b></span></td><td><span><input> <img> <img></span></td><script>Calendar.setup({inputField  : "calendarevent",         // ID of the input fieldifFormat    : "%A, %B %e, %Y %I:%M %p",    // the date formatbutton      : "trigger2",       // ID of the buttonalign       : "T1"});</script><tr><td><span><b>{L_CALENDAR_UNTIL} :</b></span></td><td><span><input> <img> <img></span></td><script>Calendar.setup({inputField  : "calendarduration",         // ID of the input fieldifFormat    : "%A, %B %e, %Y %I:%M %p",    // the date formatbutton      : "trigger3",       // ID of the buttonalign       : "T1"});</script></tr><tr><td><span><b>{L_REPEAT_MODE} :</b></span></td><td><span>{S_REPEATS_VALUE}{S_REPEATS}</span></td></tr></table><tr><td><hr></td></tr><END><BEGIN><tr><td></td><td><strong>{S_TYPE_TOGGLE}</strong></td></tr><END></table>{ATTACHBOX}{POLLBOX}{DELAYEDPOST}<tr><td>{S_HIDDEN_FORM_FIELDS}<input>  <input></td></tr></table></form><BEGIN><table><tr><th>{pm_review.L_MESSAGE_PREVIEW}</th></tr><tr> <td>{pm_review.PM_REVIEW_MESSAGE}</td></tr></table><END>{TOPIC_REVIEW_BOX} <table><tr><td><a>{L_INDEX}</a> <BEGIN>{NAV_CAT_DESC}<END>{NAV_SEPARATOR} {L_POST_A}</td></tr><tr><td><br>{JUMPBOX}</td></tr></table>  


Here is the mod I am tryingot install.. I posted about awhile ago, but it got forgotten about and now my users are bugging me daily about it... Please please please help me get this ported? <img>

PostPosted: Mon Feb 05, 2007 1:15 pm
Author: Dioncecht
Any ideas?

PostPosted: Fri Feb 09, 2007 6:16 am
Author: Dioncecht
*bump*

PostPosted: Thu Feb 22, 2007 7:06 am
Author: Dioncecht
*bump*

Re: Adding a BBCode button

PostPosted: Thu Feb 22, 2007 12:59 pm
Author: obiku
There is one thing I know you have to edit, but I don't know what you have to put in that file.
Look at
mods/bbcode_box/bbcode_box.js and
mods/bbcode_box/bbcode_box_a.js
The first file is for the board, the second one is for th ACP.

I can't help you further, bacause I'm not a java.script coder...
Sorry

Re: Adding a BBCode button

PostPosted: Sat Mar 03, 2007 10:27 pm
Author: Frost
Oops, forgot about this, still need the help?

PostPosted: Fri Mar 09, 2007 10:50 am
Author: Dioncecht
yeah, I can't seem to get it working. I tried getting into it and I got kinda got in over my head, played around with it, ended up screwing things up so I re-uploaded my backups.

ARG! why can't adding BB Code be easier? <img>

Re: Adding a BBCode button

PostPosted: Fri Mar 09, 2007 11:27 pm
Author: Frost
Ok, I'll look at it, try adding it on a test board and get back to you

It's going on my new little "list" lol

Re: Adding a BBCode button

PostPosted: Sun Mar 11, 2007 10:47 am
Author: Whisky
Hi,

Here's the procedure for IM 1.4.1 board:

In this example my button is used to link a WoW item in the forum, so it basically adds the following tags:
Code: Select all
[item]Nefarian's balls[/item]

The button images are called item.gif and item1.gif (item1 is used to show the button pressed).
I am adding the button on the top of the bbcode box, right hand side of the spellcheck button. There's a lot of place there.

Let's go...

OPEN templates/yourtemplate/posting_body.tpl

FIND
Code: Select all
<td><a>Advanced BBCode Box v5.0.0</a> </td>


BEFORE, ADD
Code: Select all
<td><img></td>

There adapt]name="something"[/b], something will be used further.
onClick="BBCsometing()", BBCsomething will be used further.
And your image's name ofcourse


OPEN mods/bbcode_box/bbcode_box.js

FIND
Code: Select all
table_help = "Creates a Table using BBCode";

AFTER, ADD
Code: Select all
wowitem_help = "Display a WoW item]Couilles de NÃÂÂ ©farian[/item]";

This is the bbcode box help, adpat it to match your buttton

GO AT THE END OF THE FILE, ADD]
Code: Select all
// Function added by Aranel for the itemstat buttonfunction BBCitem() {     var txtarea = document.post.message;         if ((clientVer >= 4) && is_ie && is_win) {         theSelection = document.selection.createRange().text;         if (theSelection != '') {         document.selection.createRange().text = "[item]" + theSelection + "[/item]";         document.post.message.focus();         return;         }     }     else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))     {         mozWrap(txtarea, "[item]", "[/item]");         return;     }     if (wowitem == 0) {         ToAdd = "[item]";         document.post.wowitem.src = "mods/bbcode_box/images/item1.gif";         wowitem = 1;     } else {         ToAdd = "[/item]";         document.post.wowitem.src = "mods/bbcode_box/images/item.gif";         wowitem = 0;     }     PostWrite(ToAdd);}  

In this code you have to ] and [/item] by your own tags of course
* replace the images names (item.gif and item1.gif)
* adapt the string "wowitem" with the "[color=orange]something
" you put above
* adapt BBCitem() with the BBCsometing you put above

SAVE AND CLOSE ALL FILES

You are done <img>

PostPosted: Tue Mar 27, 2007 11:12 am
Author: Dioncecht
You are da man! Works beautifully!

THANKS A MILLION!!

PostPosted: Sun Apr 01, 2007 7:16 am
Author: Whisky
glad to help <img>