ICODE Button

I used phpBB, and heavily hacked it, before vBulletin, so I do remember it being very easy to add additional buttons, unlike vBulletin.

When I find time, I'll download vBulletin and see if I can fathom it.

Airshow

It *is* possible to put it into the full editor. What it is just about impossible to do is to put it into the Quick Reply editor (where I am typing now). vBulletin received this complaint a lot and the latest version of vBulletin (vB 4, we are on vB 3.8.x) I believe has standardized the editor toolbar that they use. This isn't the case in our version, and we currently have no plans to upgrade.

Maybe I'm missing some hidden complexity here, but I found it very simple to install a working ICODE button in Quick Reply. Way simpler than in phpBB in fact.

After discovering how to do it with local copies of Daniweb-served vBulletin pages, I found this page, which pretty well confirms my method and tells us the name of the appropriate template file (assuming similarity of vB versions).

These are the steps:

• Create an ICODE version of the CODE graphic rxrvbimages/editor/code.gif and save as rxrvbimages/editor/icode.gif to same dir. I found Tahoma 12pt Bold with Anti-Alias Crisp to give an adequate match for adding the "I" (in Photoshop) (see attachment).
• Open the template editor_toolbar_on (assumed)
• Find:

  <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_code"><img src="$stylevar[imgdir_editor]/code.gif" width="50" height="20" alt="$vbphrase[code ]" /></div></td>

• Add below:

  <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_icode"><img src="$stylevar[imgdir_editor]/icode.gif" width="56" height="20" alt="$vbphrase
  [icode]
  " /></div></td>

• Open clientscript/vbulletin_textedit.js (or its umminified equivalent)
• Find

  this.wrap_tags=function(tagname,useoption,selection){
  tagname=tagname.toUpperCase();
  switch(tagname){
  case"CODE":

• Add below:

  case"ICODE":

• Add icode phrase to the $vbphrase construct, based on the existing code phrase.

NOTES:

1. The reason the mod is so easy is because the textedit constructor reads and parses the id of the button's div wrapper to determine the button's behaviour. Hence (almost) no changes to the javascript.
2. vbulletin_textedit.js is probably minified.
3. Not sure exactly what the mod to vbulletin_textedit.js does but it ensures ICODE is treated the same as CODE.
4. Guessing how the alt attribute is written in the template file. I have only seen the served HTML.
5. Not sure where $vbphrase is constructed.
6. I've not tested in WYSIWYG mode

There's still a bit of investigation for whoever implements this but that certainly seems to be a good 90% of the solution. (Famous last words?)

I've not yet addressed the main editor but understand the latest version of vB to offer editor button management in its admin-CP, but maybe not yet in the Daniweb version(?)

I'm hungry - must eat - and catch up with today's Commonwealth Games.

Airshow

Hey there, thank you for your investigating :)

The problem is that the editor_toolbar_on template does not work for the Quick Reply editor; Only the full editor. Additionally, custom buttons within editor_toolbar_on are dynamically created when new bbcode is added and injected into the editor_toolbar_on template. Additionally, the modification to vbulletin_textedit.js does not account for the ICODE button already being handled elsewhere in that script (as all custom bbcode is).

The link that you sent me to only works for the full editor, not the quick reply.

Was able to edit one of the php files to get it to work for the advanced editor. QuickReply is still an entirely different story.

Well, that is still progress to have it on the Advanced Editor, thanks!
:)

Baby steps.

That's great!!!!! . Hey I just used the new ICODE button.

Surprisingly, the advanced editor took the change not the quick editor. But that's sort of encouraging as my tests were conducted using an as-served POST page (with quick editor). We can't be too far from a 100% solution.

The problem is that the editor_toolbar_on template does not work for the Quick Reply editor; Only the full editor. Additionally, custom buttons within editor_toolbar_on are dynamically created when new bbcode is added and injected into the editor_toolbar_on template. Additionally, the modification to vbulletin_textedit.js does not account for the ICODE button already being handled elsewhere in that script (as all custom bbcode is).

I'm probably being incredibly naive here (and without the full vB source maybe that's inevitable) but, thinking out loud, it seems that :

• We are trying to add a "native button", not a "custom button" in the way that vB uses the term. If so, then we needn't worry about dynamic creation/injection issues.
• We need to track down the template file for the quick editor and make an edit similar to the one in editor_toolbar_on. Suggest searching the vB source for <td><div class="imagebutton" id="vB_Editor_QR_cmd_wrap0_code"> . It should find editor_toolbar_on and at least one other file.
• The edits already made (in vbulletin_textedit.js and to the vbphrase include) should handle both versions of the editor. It seems very unlikely that these files are not common.

Airshow

Sorry, Airshow, I didn't use your solution at all.

I edited a php file in order to get the advanced editor to work. Still no solution to the quick editor.

We're trying to add a custom button. The editor_toolbar_on template (templates are stored in the database, they are not actual files) only affects the advanced editor.

No changes were needed to vbulletin_textedit.js or to the vbulletin phrases in order to get the advanced editor to work. In fact, I can 100% confirm that an edit to a php file was needed, because that's what I did.

If all that fails, there's a fallback position; providing for shift-click on the CODE button.

1. Open clientscript/vbulletin_textedit.js (or its umminified equivalent)
2. Find :

   if(cmd.substr(0,4)=="wrap"){

3. Add below :

   /* *********** start: SHIFT_CLICK ICODE HACK ********* */ 
   if(e.shiftKey && cmd.substr(6) === 'code'){
     cmd = cmd.replace("code", "icode");
   }
   /* *********** fin: SHIFT_CLICK ICODE HACK ********* */

When shift-click is detected, we simply effect a command substitution.

It's not ideal as there's no cue to the user that shift-click is available unless we change the alt text.

Airshow

Umm ... how did you just break the DaniWeb layout?

Umm ... how did you just break the DaniWeb layout?

Bad LIST. Fixed now.

Airshow

We're trying to add a custom button.

I think that's the problem.

Think "native button" not "custom button".

Airshow

I don't think you understand :)

I understand that you have found a different solution.