BbCodes & Buttons Manager

Unmaintained BbCodes & Buttons Manager 3.3.5

No permission to download
FAQ
  1. There are three rendering methods, which one should I use if I want to begin with?
    If your Bb Code is basic, just use the Replacement method. But I still recommend to use the Template method.

    The big advantage of the Template Method is that it's easier to customize & write a Bb Code. For example, to include a javascript you don't need to worry to use a hook listener (or a replacement with TMS). You just use the xen tag <xen:require js="js/directory/file.js" /> and the javascript will be automatically loaded, and this only once, when the Bb Code is used. Same thing for css.

    It is also more comfortable to manage Bb Codes options thanks to the XenForo template conditionals and helpers. Speaking of Bb Codes options, I've got only one recommendation: always keep the control on which final value will be used at the end. See the highlighter template code: the background color can be selected by the user, but it's you (and not the user) who decides if the option is valid or not.

    A short example is available here.

  2. I was using before the StopAutolinkingPatch. Should I do something before remove it and use this addon stop autolinking function?
    Yes. Read here.

  3. How can I make the parser permissions work with XenPorta?
    Disclaimer: I remind you the parser permissions is an experimental feature

    ***EDIT: need to rewrite this part***

  4. The "Custom Bb code Manager" BbCode xml files don't work with this addon, is this normal?
    Yes, you will need to recreate them. With the 1.1 version, a converter/exporter is available, just use it.

  5. I'm using PHP 5.2.x and I have problems: most of the tags are disappearing. What can I do?
    You will have to edit a XenForo file. Sorry there is no other alternative.
    This file is: XenForo_BbCode_Formatter_Base
    Path: {yourForum}/library/XenForo/BbCode/Formatter/Base.php

    Search:
    PHP:
                return call_user_func($tagInfo['callback'], $tag, $rendererStates, $this);

    Replace:
    PHP:
                /*return call_user_func($tagInfo['callback'], $tag, $rendererStates, $this);*/
                return call_user_func_array(array($tagInfo['callback'][0], $tagInfo['callback'][1]), array($tag, $rendererStates, $this));

    Explanation (as far as I'm able to explain...): $this doesn't seem to be recognized using call_user_func in an extended class (xfcp). Using call_user_func_array fixes the problem.

  6. How to configure buttons with XenForo Redactor Editor ?
    A tool is now included in this addon. If you want to do it manually, see this section.

  7. Should I modify the "BbCodes Options Separator" option in this addon general options or should I modify the "Custom options separator" option in the bbcode options ("Parser configuration tab") ?
    If you have any other bbcodes using [coma+blank] as separator, don't modify the global options:
    View attachment 56413
    But modify it here
    View attachment 56412

    If you don't have any other bbcodes using [coma+blank] as separtor, don't hesitate to modify the goblal option.

  8. Using some bbcodes inside the options of a Bb Code breaks the opening tag, ie: [bbcode=[b]Text[/b]]Content[/bbcode], how can I avoid this?
    Check this.

  9. I want to select an icon for my button, but the XenForo default sprite has not the icon I need, what can I do ?
    Use your imagination & talent to create an icon or go there: IcoMoon App - Icon Font, SVG, PDF & PNG Generator, then select a free pack of icons, ajust the size,and download the ones you will have selected (png format is available).

    This website has also an option to automatically create a sprite for you. You select your icons, you click on the "Images" button at the bottom of the screen. In the option, you set a 18px height and for the sprite columns and margin, just use "20px" and it should be ok.

  10. I already have a Bb Code provided by another addon, how can I create just a button for it?
    You need to create an "Orphan button". The process is almost the same than for a Bb Code but its tag must have a @ before.

    Example:
    you've got a hide Bb Code provided by an independent plugin and you want to create a button for it. Just go to the Bb Code Manager and create a new "Bb Code" that will have an at sign (@) as the first character of its tag name: @hide. Then you just need to configure your Button options.

    Please note that if you're using XenForo Redactor or the direct return option for MCE4, the @ will be striped when you click on the button. To continue with the above example, the code inserted inside the editor will be [hide][/hide] (without the at sign as you can see).

  11. I can't use quotes character in my tag options, how can I do ?
    This is because of the parser engine. You need to wrap your option between quotes, then insert your "real quotes" where you want. A real example with the spoiler tag. Let's give it the options: "No" means "no".
    Code:
    [spoiler=""No" means "no""]content[/spoiler]

  12. Could you explain me the XenForo Bb Codes permissions differences?
    The permissions can be applied to the visitor (see this post) or to the poster (see the option group named [Bb Codes & Buttons Manager] XenForo Bb Codes Control).

  13. My XenForo Bb Codes viewing permissions are not working, what can I do?
    viewperms-png.98602

    If your configuration looks like the one above, that's the reason why it isn't working. The default state for a Bb Code is it to be parsed. So if I ask you the question "Do you want me to disable/to hide the content of the url Bb Code", if you say "YES" (green) it will be disabled. If you say "No" (grey - default state), it will be parsed. All your settings are on "Allow" which mean all these Bb Codes will be disabled. So fix this.

    Important: you need to check the configuration not only for usergroups permissions, but also for nodes permissions AND user permissions. So don't forget to check these 3 kind of permissions before reporting a problem.

  14. Why do you I have the error "ErrorException: DOMDocument::saveHTML() expects exactly 0 parameters" ?
    It's coming from the new HTML checker that is sometimes used by some Bb Codes. It shows you're not using a recent version of PHP (< 5.3.6). So the solution is to upgrade it OR to use an alternative method to check the Html content of your Bb Codes. To set it, just do as described in the below screenshot:
    htmlchecker-png.98603

How to create a Bb Code with the template render and a callback?
Edit 2013/31/12:You can now use the XenForo listener "bbm_callback_template_pre" instead of a callback. See this screenshot. This listener requires your Bb Code to have an Unique Identifier. This setting is available in your Bb Code options when the XenForo debug mode is enabled.

The logic and the structure:
Your name is "YourName", you want to create an addon with a bbcode. This addon name is "demo". This bbcode will have a callback, then will use a template to format the output.

  1. Create some directories in the XenForo library directory: library/YourName/Demo/BbCode/Formatter
    • The root "library/YourName/Demo" will be your addon directory
    • The suffix ".../BbCode/Formatter" will be where you will put your php (You can put it everywhere you want, put it's just to keep a logic with the XenForo Directory Structure)
  2. Inside the directory library/YourName/Demo/BbCode/Formatter, create a file "MyBbCodes.php"
    Inside this file, create your BbCode method callback, let's say "templateDoThis", with the callback signature. Example:
    PHP:
    <?php
    class YourName_Demo_BbCode_Formatter_MyBbCodes
    {
       public static function templateDoThis(&$content, array &$options, &$templateName, &$fallBack, array $rendererStates, $parentClass)
       {
         //This is your BbCode callback - $options can be used to check/modify BbCodes options (the ones user will have enter)
       }
    }
    There are many demos here.
    At the moment, just create the file, you will code the callback later
  3. Go to XenForo Templates and create a new template for example called "yourname_bbcode_dothis".
  4. Go to the Bb Codes Manager, create a Bb Code. In the "parser methods" tab, check "Template Method", enter the template name "yourname_bbcode_dothis" and for the callback use: YourName_Demo_BbCode_Formatter_MyBbCodes (left box), then templateDoThis (right box)
  5. Start to code your php callback, then your template
Interaction between the callback and the template:

If you look inside the callback signature, you will se the $options variable. This is an array of all parameters the users will have set in his Bb Code options. The parameters are exploded according to the option separator (see inside the Bb Code options).

Let's say your option separator is: |
The Bb Code is [myBb=Param1|Param2]content[/myBb]
The $options will then be an array with:
  • $option[1]:"Param1"
  • $option[2]:"Param2"

The $options variable is passed as reference, so you can modify it on the fly. Let's suppose you want to add a key, just do this: $option['myKey'] = 'bonjour'; then in your template, you can use {$option.myKey}.

How to configure buttons with XenForo Redactor Editor ?
Edit: with the version 2.2.0 of this addon, there is now a feature to avoid the below steps. Of course the below steps are still working and might give your more possibilities to customize your buttons.

Presentation
If you don't want to use the TinyQuattro editor and still want to use the XenForo Redactor Editor, you will have to check the html code and get the button class (see the example in the next section below). It should be like this: .redactor_btn_bbm_yourBbCodeTag. You need to create your own sprite (a sprite is an image with several icons) and then use css to set the position of your icon in the sprite. You can also use the XenForo default sprite and play with this code (move background position):

Code:
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag,
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag:hover {
  background-position: 0 0;
}

Demo with the XenForo default sprite and the default XenForo smiley icon
Click here to display the XenForo default sprite. We're going to change the smiley icon with another one, let's say the one above inside the sprite:
View attachment 54562

To get the smiley icon class, just use any developer tool provided with your browser (for example with Firefox: Firebug). So with Firebug: right click on the smiley icon, then select "Inspect with Firebug". You should see this then:
View attachment 54570

As you can see, the css class for the smiley icon is: redactor_btn_smilies. It will be the same thing for your custom buttons with the BBM, except the class format will be: redactor_btn_bbm_yourBbCodeTag (a prefix "bbm" is used before your bbcode tag).

The previous screenshot has also an important information about css (see in green):
View attachment 54571

If you want to use another icon of the XenForo default sprite, you will only have to modify the background position. You can do it in live with Firebug:
View attachment 54572

So the new background position will be: 3px -2365px. You just need to add this information into your EXTRA.css template. Since you're overriding the XenForo default configuration of the smiley icon, you will have to add !important to the css:
Code:
.redactor_toolbar li a.redactor_btn_smilies {
  background-position: 3px -2365px !important;
}

If you want to set the same icon for a custom button using the XenForo default sprite:
Code:
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag,
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag:hover {
  background-position: 3px -2365px;
}
P.S: the hover extra configuration seems to be needed according to Mike West (source). I don't use Redactor, so I can't confirm but do as Mike West recommends.

You can also use your own sprite, which means you will have to create your own image with several icons in it. Once you created your sprite, the logic is the same as above. You just need to add what sprite you want to use:
Code:
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag,
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag:hover {
  background-image: url("styles/default/xenforo/editor/mySprite.png");
  background-position: 0 0;
}
P.S: You can of course change your sprite path. You will have to set your background position too.

The below information are very detailed. Once you understand how to use css, you will spend no more than 20 seconds to configure one custom button.
Back
Top Bottom