jfb-acp-custom_bbcodes [Jcink.com Wiki]

JFH >> AdminCP >> Custom BBcodes

The standard BBCodes such as [b],[i],[QUOTE],[CODE], etc can be added to. You can use this, for example, to allow your users to safely post YouTube videos without the need of enabling HTML. To begin using it, make sure you have custom BBcodes turned ON in Admin CP → Custom BBcodes → Custom BBCode settings.

Adding a new BBcode

Begin adding a new BBCode under Admin CP → Custom BBcodes → Add new BBcode.

The BBCode system can look intimidating but it is actually quite simple. To start with, we'll explain to you, and show you how to add a popular custom BBCode called the YouTube tag. This allows users to directly embed videos from YouTube.com into the forums.

There are three sections to adding a BBcode.

BBcode Name

Keep it simple, no special characters, no spaces. For our example, we'll just put “youtube” (without the quotes).

BBcode Type

This part can seem confusing, but it isn't. Param stands for parameter, or option. There are two BBCode types you can add. Param type 1 means that the BBcode only has ONE option. Codes like [b], [i], and the [QUOTE] tag are all type 1 bbcodes, for example. You can only insert one option of text into them. However, a Param 2 type BBCode is more complicated. This is one such as the [align] tag. The align tag works like this: [align=right]hey, this text is on the left[/align]. It has TWO options, or parameters, you can specify the direction AND Text.

The type you select depends on the BBcode you are trying to make.

In our YouTube code, we only need one option. So, 1 param. Choose that for the example.

HTML conversion

The magic happens here. This is where you tell the system how to translate your member's bbcode to something real. (PARAM1) and (PARAM2) in your code designate how the code is going to be handled. Let's look at the YouTube code for example.

<iframe width="560" height="315" src="https://www.youtube.com/embed/(PARAM1)" frameborder="0" allowfullscreen></iframe>

You will see that in place of the Video ID number, we've put (PARAM1). This tells the system that whatever the user puts in BETWEEN the [youtube] tag, goes there.

Go ahead now and paste our code, set the BBcode to display on the form, and add it.

Congratulations, you've added your first BBcode.

Using the new tag

This is how to use the new tag. Videos are linked to like this: https://www.youtube.com/watch?v=PANd-J3MUns

So how do you get that video embedded into your board? Simple. Take everything after v=, which is the youtube video ID, and stick it in between.

[youtube]PANd-J3MUns[/youtube]

You should now seen an embedded youtube video player in your posts when it is used. This will work for ANY video on YouTube.

Nesting Requirements

It's very important for some BBCodes which you plan to nest to have a definitive start/end point. This is because the system will get confused and not know where a particular bbcode starts or ends, causing a break.

To rectify this issue, simple use HTML comments in the suffix and prefix of the BBCode. As an example, here are two simple BBCode divs - but they have the exact same ending delimiter. (</div). This poses a problem if you want to nest them.

<div class="one">(PARAM1)</div>
<div class="two">(PARAM1)</div>

The fixed version looks like this:

<!-- bbc_one --><div class="one">(PARAM1)</div><!-- end_bbc_one -->
<!-- bbc_two --><div class="two">(PARAM1)</div><!-- end_bbc_two -->

Now you can use the codes as such: [one][two]test[/two][/one] and the system will not become confused.

Limitations of the Custom BBcode

While the custom BBcode is a great addition for admins who don't want to enable HTML, there are some limitations still built into the

  • Custom BBcodes will be added at the last line of the post and do not utilize the text selector. (EX- if you start a new post, hit enter four times then click the youtube BBcode button, it will be placed on the 4th line, regardless of where you're currently entering text.)
  • Custom BBcodes may not work so well with some CSS functions. (So Custom BBcodes that attempt to integrate CSS may not display as expected. Particularly involving the float style.)
  • Custom BBcodes can also be used in the Personal Messages but they don't show up on the BBcode list above the text box. If you wish to use them you'll have to type them in manually.
  • Custom BBCode modifications are not retroactive. This means that if you edit a Custom BBCode via the Admin CP, and then attempt to edit an old post which used that BBCode, it will be broken. This is intentional by design for performance reasons, and not a bug.
 
jfb-acp-custom_bbcodes.txt · Last modified: 2017/06/28 12:34 by jcink