phpBB3 BBCodes to MyBB MyCodes Tutorial
by Mikers
Don't be intimidated by the length of this tutorial. I just have a habit of over-explaining things. The process is actually very simple, I just wanted to make sure I explained it so that even those with little coding skills could understand.
While phpBB Codes and MyCodes work a little differently, they're very much alike. And many webmaster should easily be able to convert a BBCode to a MyCode. But just in case, this tutorial should help you when converting your favorite BBCodes to MyCodes for your MyBB Forum.
Relax for any anyone out there who fears a heap of HTML coding requirements or anything difficult. The process is very simple, and has little to do with HTML. And I think the best way to show you is through an example.
So for our example. I'll be converting the
Spoiler 3 BBCode created by
Sjoerd, over at
phpBB3 BBCodes.
To start. Let's take a look at the standard Replacement Codes for this BBCode.
BBCode:
Code:
[spoiler={TEXT2}]{TEXT1}[/spoiler]
HTML Replacement:
Code:
<dl class="codebox"><dt>{TEXT2} | <a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="display: none;">{TEXT1}</dd></dl>
Step 1: Replacing the BBCode/MyCode Area
First, I'll show you how to what to replace for the BBCode/MyCode standard Area. For converting any BBCode the process simply stated, goes like this.
Standard BBCode:
Code:
[BBCode]{TEXT1}[/BBCode]
Converted To MyCode:
Code:
\[BBCode\](.*?)\[/BBCode\]
Now, all I really did to convert this area, was add
4 backslashes and replace {TEXT1} with
(.*?) , which is standard for MyCode replacements. This conversion is usually global.
A Closer look at the changes,
\[BBCode
\]
(.*?)\[/BBCode
\]
The backslashes ALMOST ALWAYS go to those same positions, and always at the end of whatever code you place before those slashes.
Now for a code like the Spoiler 3 BBCode, this may seem harder to convert, but it's really not.
phpBB3 BBCode:
Code:
[spoiler={TEXT2}]{TEXT1}[/spoiler]
To MyCode Conversion:
Code:
\[spoiler=(.*?)\](.*?)\[/spoiler\]
As you can see, it's quite simple even for the BBCodes that have the additions of "[BBCode={TEXT1}]" crap.
Step 2: Replacing the HTML Area
Now on to the HTML Replacement. This really isn't harder, but it is something you still have to pay attention to. So I'll start by bringing in the standard HTML Replacement for the Spoiler 3 BBCode.
Spoiler 3 BBCode HTML Replacement:
Code:
<dl class="codebox"><dt>{TEXT2} | <a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="display: none;">{TEXT1}</dd></dl>
Search within that code area, and you'll find two codes to notice. {TEXT2} and {TEXT1}. This sound a bit familiar?
Let me refresh your memory.
phpBB3 BBCode:
Code:
[spoiler={TEXT2}]{TEXT1}[/spoiler]
Yes, the {TEXT2} and {TEXT1} are related in both the HTML Replacement and the BBCode area. This should be common knowledge, but it's important to note this to convert a BBCode to a MyCode.
Now. As you remember from the BBCode area to MyCode area conversion. We replaced both {TEXT1} and {TEXT2} with two (.*?)'s. So now how do we replace the {TEXT1} and {TEXT2} in the HTML replacement?
I'll show you the immediate conversion, and then explain.
phpBB3 BBCode:
Code:
<dl class="codebox"><dt>{TEXT2} | <a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="display: none;">{TEXT1}</dd></dl>
To MyCode Conversion:
Code:
<dl class="codebox"><dt>$1 | <a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="display: none;">$2</dd></dl>
Do you see what I did there? {TEXT1} was replaced with $2, and {TEXT2} was replaced with $1. But why is that? Well let me show you.
Zooming Back to the MyCode Area Replacement:
Code:
\[spoiler=(.*?)\](.*?)\[/spoiler\]
As you remember, instead of {TEXT1} and {TEXT2} and {TEXT3}, all of these are replaced with (.*?). In the HTML Replacement {TEXT1} is related to {TEXT1} from the BBCode area. In this, (.*?)'s are related to $#'s. But how do you tell which ones?
The (.*?)'s are related to the $#'s
in the order that they appear. So to show one of our last examples in the tutorial.
\[spoiler=
(.*?)\] is related to
$1.
while
(.*?)\[/spoiler\] is related to
$2.
You should have an equal number of $#'s in the HTML replacement to the number of the (.*?)'s in the MyCode area replacements. The first (.*?) that appears in the MyCode area would be $1 when reading left to right. The second (.*?) that appears in the MyCode area would be $2. And the third (.*?) would be $3. And so on, and so forth.
So the final conversion of the phpBB3 BBCode Spoiler 3 would be.
MyCode Area:
Code:
\[spoiler=(.*?)\](.*?)\[/spoiler\]
MyCode HTML Replacement:
Code:
<dl class="codebox"><dt>$1 | <a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block'; this.innerHTML = '-'; } else { spoiler.style.display = 'none'; this.innerHTML = '+'; };">+</a></dt><dd style="display: none;">$2</dd></dl>
This conversion method is not true for all BBCodes (especially Mod BBCodes) to MyCodes, but generally...this is the best conversion method for most.
Thanks for reading. And I hope that I didn't confuse you too much in this tutorial, as that's obviously unintended. If you have any further questions, feel free to post them on this topic.
Hope This Helps.
--
Original Topic:
http://pulselifeent.com/forum/thread-256.html
My website's still under construction, and isn't meant to be revealed until late May, but whatever.

If you enjoyed the tut, and found it helpful, please do me the courtesy of not posting it without my permission. I'll gladly give it to you if you PM me.
WARNING: Be very very careful when using this to convert certain BBCodes. Those BBCodes that use of certain functions for HTML replacement will leave you open to powerful security vulnerabilities. Only use (.*?) when it does not pose a risk for HTML/XSS Injection. I will explain more on this later. Lastly, I'm not responsible for HTML Injections if you do use this method. However, if you do use this tutorial to convert a BBCode, and it works through my standard method, you should be fine - but again, I make no promises at all, and cannot be held responsible.