[Tutorial] Create New BBCode Tags
+4
Lik3lyLad
Zzbaivong
Draxion
Daemon
8 posters
[Tutorial] Create New BBCode Tags
With this code you can create your own bbcode tags.
Image:
![[Tutorial] Create New BBCode Tags Sem_ty13](https://i.servimg.com/u/f62/17/31/71/58/sem_ty13.png)
Create a new JS code with the following content:
Example:
If you want to keep the example tags from the image, add it to your css:
![[Tutorial] Create New BBCode Tags 1f601](https://2img.net/h/twemoji.maxcdn.com/16x16/1f601.png)
Image:
![[Tutorial] Create New BBCode Tags Sem_ty13](https://i.servimg.com/u/f62/17/31/71/58/sem_ty13.png)
Create a new JS code with the following content:
- Code:
/*
* Application: Create New BBCode Tags
* Date: 18/05/2018
* Version: 1.321052018
* Copyright (c) 2018 Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
(function() {
BBParser = {
initialize: function() {
$(function() {
BBParser.setupBBParser();
});
},
add: [
/*
* Note: Add a comma at the end of each new entry
* '{option}' corresponds to the optional tag title, and '{content}' correspond to the text between the tags
*/
{
tag: 'success',
close: true,
replacement: '<div class="notice notice-success"><h5>{option}</h5><p>{content}</p></div>'
},
{
tag: 'warn',
close: true,
replacement: '<div class="notice notice-warn"><h5>{option}</h5><p>{content}</p></div>'
},
{
tag: 'info',
close: true,
replacement: '<div class="notice notice-info"><h5>{option}</h5><p>{content}</p></div>'
},
{
tag: 'alert',
close: true,
replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
},
{
tag: 'guest',
close: true,
replacement: '<div class="guest">{content}</div>',
replace: function(option, content) {
if (_userdata.session_logged_in < 1) {
return 'You need to be logged in to view this content';
return content;
}
}
}
// Note: Do not add a comma at the end of the last entry
],
// Do not change anything down
validateTag: function(a) {
if (!/^\w+$/.test(a)) throw new RangeError("You added an invalid tag: " + a);
},
replacers: function(a, b, c) {
return (a || "").replace(/{option}/g, b || "").replace(/{content}/g, c || "");
},
optionReg: /.*?=("|'|)(.*?)\1\]/,
parsedContent: function(a, b, c) {
return a.replace(c ? RegExp("(\\[" + b.tag + "[^\\]]*\\])([\\s\\S]*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(d, e, f) {
c || (e = d);
e = BBParser.optionReg.test(e) ? e.replace(BBParser.optionReg, "$2") : b.defaultOption;
if("undefined" !== typeof b.replace) {
d = c ? b.replace(e, f) : b.replace(e);
"string" === typeof d ? c ? f = d : e = d : d;
"object" === typeof d && (e = d.option || e, f = d.content || f);
}
return BBParser.replacers(b.replacement, e, f);
});
},
setupBBParser: function() {
var postBody = $(".postbody, .blog_message");
for (var i = 0, e;(e = postBody[i++]);) {
for (var j in BBParser.add) {
var item = BBParser.add[j];
// Validating tag
BBParser.validateTag(item.tag);
e.innerHTML = BBParser.parsedContent(e.innerHTML, item, item.close);
}
}
}
};
BBParser.initialize()
})();
Example:
- Code:
[tagname="Title"]My Content[/tagname]
Can be replaced by
<div class="some-class"><p>Title</p>My Content</div>
- Steps:
close
-> close: true <- means the tag needs to be closed. For example:- Code:
[tagname]My Content[/tagname]
defaultOption
-> defaultOption <- will add a default "title" if one is not entered in the first tag. For example... If you add -> defaultOption: 'SOME TEXT' <- See an example:- Code:
[tagname]My Content[/tagname]
Can be replaced by
<div class="some-class"><strong>SOME TEXT</strong>My Content</div>
replacement
-> replacement <- will replace the tags with an html structure defined by you. For example:- Code:
replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
- Code:
{
tag: 'alert',
close: true,
replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
},
replace
You can use replace to change tag values by creating a function with some kind of predefined condition or something. For example:- Code:
{
tag: 'daemon',
close: true,
replacement: '<div class="daemon-box"><p>{option}</p><hr>{content}</div>',
replace: function(option, content) {
if (content.indexOf("shazam") !== -1) {
return {
option: 'SHAZAM ALERT',
content: 'OMG, you entered the magic word :O'
};
}
}
}
- Click here to see:
If you want to keep the example tags from the image, add it to your css:
- Code:
.notice {
background: url(http://i.imgur.com/VWRy0Mc.png) repeat-x 0 0;
color: #FFF;
width: 83%;
font-weight: normal;
padding: 13px 15px;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
position: relative;
left: 34px;
}
.notice p {
margin-bottom: 1.5em;
}
.notice p:last-child {
margin-bottom: 0;
}
.notice h5 {
font-size: 14px;
font-weight: bold;
margin-bottom: .65em;
}
.notice:before {
content: "";
background: url(http://i.imgur.com/PcLYd52.png) no-repeat 100% 0;
width: 33px;
height: 40px;
position: absolute;
left: -34px;
top: 9px;
}
.notice-success {
background-color: #EEF4D4;
color: #596C26;
border: 1px solid #8FAD3D;
}
.notice-success:before {
background-position: 100% 0;
}
.notice-warn {
background-color: #FFEA97;
color: #796100;
border: 1px solid #E1B500;
}
.notice-warn:before {
background-position: 100% -800px;
}
.notice-alert {
background-color: #EFCEC9;
color: #933628;
border: 1px solid #AE3F2F;
}
.notice-alert:before {
background-position: 100% -400px;
}
.notice-info {
background-color: #C6D8F0;
color: #285797;
border: 1px solid #4381CD;
}
.notice-info:before {
background-position: 100% -1200px;
}
- Suggestions:
Youtube thumbnail
READ: https://help.forumotion.com/t153342-tutorial-create-new-bbcode-tags#1068806
Download button
READ: https://help.forumotion.com/t153342-tutorial-create-new-bbcode-tags#1068818
![[Tutorial] Create New BBCode Tags 1f601](https://2img.net/h/twemoji.maxcdn.com/16x16/1f601.png)
Last edited by Daemon on Sat 16 Jun 2018 - 18:39; edited 35 times in total
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
Nice code, @Daemon. I was planning to make something like, but I guess there's no need for it now
). I'll test it when I'll have time.

Guest- Guest
Re: [Tutorial] Create New BBCode Tags
Sorry, @Daemon, I don't know if I am clueless when it comes to this code, but I tested it on my testing site (phpbb3) and I couldn't get it to work. Can you explain exactly how to get these tags to show? Thanks.

![[Tutorial] Create New BBCode Tags Draxio14](https://i.servimg.com/u/f28/11/40/02/06/draxio14.png)
NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as
![[Tutorial] Create New BBCode Tags Solved11](https://i.servimg.com/u/f21/16/89/96/68/solved11.png)
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself
Draxion- Support Moderator
-
Posts : 2513
Reputation : 321
Language : English
Location : USA
Re: [Tutorial] Create New BBCode Tags
Draxion wrote:Sorry, @Daemon, I don't know if I am clueless when it comes to this code, but I tested it on my testing site (phpbb3) and I couldn't get it to work. Can you explain exactly how to get these tags to show? Thanks.
You need to create a new JavaScript with investment on all pages.
By default, there are 5 new tags in this code, but you can create others.
Try the following:
[success="Title"]Content[/success]
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
@Draxion,
If you use the default code without edits, then you can use this in your posts on the forum:
The code will automatically replace them with HTML.
If you use the default code without edits, then you can use this in your posts on the forum:
- Code:
[successo="abc"]abc[/successo]
- Code:
[warn="abc"]abc[/warn]
- Code:
[info="abc"]abc[/info]
- Code:
[alert="abc"]abc[/alert]
- Code:
[guest="abc"]abc[/guest]
The code will automatically replace them with HTML.
Guest- Guest
Re: [Tutorial] Create New BBCode Tags
Nope, still doesn't work.
There's a syntax error in the coding.
There's a syntax error in the coding.

![[Tutorial] Create New BBCode Tags Draxio14](https://i.servimg.com/u/f28/11/40/02/06/draxio14.png)
NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as
![[Tutorial] Create New BBCode Tags Solved11](https://i.servimg.com/u/f21/16/89/96/68/solved11.png)
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself
Draxion- Support Moderator
-
Posts : 2513
Reputation : 321
Language : English
Location : USA
Re: [Tutorial] Create New BBCode Tags
I tested it on my punBB forum(the templates are heavily modified) and it's not working.
The console says this:
I don't know exactly what causes the error, but I noticed something in the code:
From what I can see, this is the list of elements where the code searches for bbcodes. The list is incomplete and will only work for 1 or 2 forum versions. I think you should search for bbcodes on the whole page. This way, there won't be any problems with the different selectors.
If no one finds the issue till tomorrow, I think I'll start working on a code for this.
The console says this:
- Code:
SyntaxError: expected expression, got ')'
I don't know exactly what causes the error, but I noticed something in the code:
|
If no one finds the issue till tomorrow, I think I'll start working on a code for this.
Guest- Guest
Re: [Tutorial] Create New BBCode Tags
I apologize ... I ended up deleting what I should not when I went to post here. Try it now.
![[Tutorial] Create New BBCode Tags 1f605](https://2img.net/h/twemoji.maxcdn.com/16x16/1f605.png)
@Edit:
I edited the post and ended up putting the code twice. HAHAHAH
Try it now, again...![[Tutorial] Create New BBCode Tags 1f606](https://2img.net/h/twemoji.maxcdn.com/16x16/1f606.png)
![[Tutorial] Create New BBCode Tags 1f605](https://2img.net/h/twemoji.maxcdn.com/16x16/1f605.png)
@Edit:
I edited the post and ended up putting the code twice. HAHAHAH
Try it now, again...
![[Tutorial] Create New BBCode Tags 1f606](https://2img.net/h/twemoji.maxcdn.com/16x16/1f606.png)
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
Still, says "Syntax Error"
I'm getting it here.
I'm getting it here.
- Code:
re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");

![[Tutorial] Create New BBCode Tags Draxio14](https://i.servimg.com/u/f28/11/40/02/06/draxio14.png)
NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as
![[Tutorial] Create New BBCode Tags Solved11](https://i.servimg.com/u/f21/16/89/96/68/solved11.png)
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself
Draxion- Support Moderator
-
Posts : 2513
Reputation : 321
Language : English
Location : USA
Re: [Tutorial] Create New BBCode Tags
Draxion wrote:Still, says "Syntax Error"
I'm getting it here.
- Code:
re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");
Read the edit I made in my last post.
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
Sorry, still getting the same error.
EDIT: My bad. I didn't refresh the page and therefore I took the same code. ;P hahah
EDIT: My bad. I didn't refresh the page and therefore I took the same code. ;P hahah

![[Tutorial] Create New BBCode Tags Draxio14](https://i.servimg.com/u/f28/11/40/02/06/draxio14.png)
NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as
![[Tutorial] Create New BBCode Tags Solved11](https://i.servimg.com/u/f21/16/89/96/68/solved11.png)
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself
Draxion- Support Moderator
-
Posts : 2513
Reputation : 321
Language : English
Location : USA
Re: [Tutorial] Create New BBCode Tags
Draxion wrote:Sorry, still getting the same error.
EDIT: My bad. I didn't refresh the page and therefore I took the same code. ;P hahah
Hahahah... Works fine now?

Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
Yes, works great!


![[Tutorial] Create New BBCode Tags Draxio14](https://i.servimg.com/u/f28/11/40/02/06/draxio14.png)
NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as
![[Tutorial] Create New BBCode Tags Solved11](https://i.servimg.com/u/f21/16/89/96/68/solved11.png)
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself
Draxion- Support Moderator
-
Posts : 2513
Reputation : 321
Language : English
Location : USA
Re: [Tutorial] Create New BBCode Tags
This is an interesting tutorial, but it will leave garbage in the article content.
A better way is to use a BBcode table. Convert fake BBcode into BBcode table when a post is posted. And vice versa, when an article starts editing.
A better way is to use a BBcode table. Convert fake BBcode into BBcode table when a post is posted. And vice versa, when an article starts editing.
Zzbaivong- Forumember
- Posts : 101
Reputation : 51
Language : JavaScript ^^
Re: [Tutorial] Create New BBCode Tags
I leave here a suggestion for a bbcode tag:
![[Tutorial] Create New BBCode Tags 1-8](https://2img.net/h/i6.photobucket.com/albums/y203/fatherofpain/1-8.jpg)
Use as follows:
https://www.youtube.com/watch?v=0RyInjfgNc4
----------------------
![[Tutorial] Create New BBCode Tags 1-8](https://2img.net/h/i6.photobucket.com/albums/y203/fatherofpain/1-8.jpg)
- Code:
{
tag: 'ytscreen',
replacement: '<a href="https://youtube.com/watch?v={ATTR}"><img src="http://i.ytimg.com/vi/{ATTR}/mqdefault.jpg" width="320px" height="180px" alt="Click to Watch" title="Click to Watch"></a><br>Click on the image to watch'
}
Use as follows:
https://www.youtube.com/watch?v=0RyInjfgNc4
----------------------
- Code:
[ytscreen="0RyInjfgNc4"]
Last edited by Daemon on Mon 21 May 2018 - 23:52; edited 3 times in total
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
Another suggestion:
- Code:
{
tag: 'download',
replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
}
- Code:
[download="http://somelink.com"]
Last edited by Daemon on Mon 21 May 2018 - 23:52; edited 3 times in total
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
Daemon wrote:Another suggestion:
- Code:
download: {
close: false,
replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
}
- Code:
[download="http://somelink.com"]
Hello,
I see you're familiar with .js and I need simplest possible replacement but I can't make it working in my forum. I don't have enough posts to send you PM so if you want to help me please send me PM.
Tnx.
Lik3lyLad- New Member
- Posts : 3
Reputation : 1
Language : English
Re: [Tutorial] Create New BBCode Tags
Hey and welcome to Forumotion,
change your code to this,it's incomplete is just a suggestion of a tag, the code above:
Tag
change your code to this,
- Code:
/*
* Application: Create New BBcode Tags
* Date: 22/08/2016
* Version: 1.222112016
* Copyright (c) 2016 Daemon <help.forumotion.com>
* This work is free. You can redistribute it and/or modify it
*/
jQuery(document).ready(function($) {
var bbCodes = {
// Note: Add a comma at the end of each new entry
// '{ATTR}' matches the 'title' of the tag, and '{CONTENT}' matches 'text' between tags
download: {
close: false,
replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
},
guest: {
close: true,
replacement: '<div class="guest">{CONTENT}</div>',
replace: function(content) {
if (_userdata.session_logged_in < 1) {
return "You need to be logged in to view this content";
return content;
}
}
}
// Note: Do not add a comma at the end of the last entry
};
// Do not change anything down
var getPost = $(".postbody, .blog_message");
var entry;
for (var i = 0, e;(e = getPost[i++]);) {
entry = $(e);
var re, match;
$.each(bbCodes, function(tag, value) {
re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");
match = entry.html().match(re);
if (match) {
var content, b, c, as_string, as_func, replacement;
for (var tag in match) {
content = match[tag];
b = "$3";
if(typeof value.replace != "undefined") {
as_string = value.replace.toString();
as_func = eval('(' + as_string + ')');
if (as_func(content)) b = as_func(content);
}
replacement = value.replacement.replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
c = content.replace(re, replacement);
entry.html(entry.html().replace(content, c));
}
}
});
}
});
Tag
|
pedxz- Forumember
- Posts : 696
Reputation : 137
Language : 🇵🇹
Re: [Tutorial] Create New BBCode Tags
Anyone who can test to prove the functionality of the code?
Last edited by Daemon on Mon 21 May 2018 - 23:54; edited 1 time in total
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
Re: [Tutorial] Create New BBCode Tags
I added a step by step to improve understanding of the code.
UPDATED TO VERSION 1.321052018!!!!!
UPDATED TO VERSION 1.321052018!!!!!
Daemon- Forumember
- Posts : 104
Reputation : 90
Language : Português
TonnyKamper likes this post
Re: [Tutorial] Create New BBCode Tags
Hello!
First of all – thank you for this code, we are using it and it's great!
Second of all – we have a little problem with this code. Few days ago our spoiler refused to work properly and it turned out that this JS causes this problem. I had to turn it off so we could use spoilers again. We are using new bbcodes a lot and after turning it off forum looks... well, bad. Is there any chance for an update? I can see that last update was in 2018 but I hope that you'll see this message somehow
First of all – thank you for this code, we are using it and it's great!
Second of all – we have a little problem with this code. Few days ago our spoiler refused to work properly and it turned out that this JS causes this problem. I had to turn it off so we could use spoilers again. We are using new bbcodes a lot and after turning it off forum looks... well, bad. Is there any chance for an update? I can see that last update was in 2018 but I hope that you'll see this message somehow
![[Tutorial] Create New BBCode Tags 1f62a](https://twemoji.maxcdn.com/16x16/1f62a.png)
Juviia- New Member
- Posts : 4
Reputation : 1
Language : Polish
Re: [Tutorial] Create New BBCode Tags
Hello,Juviia wrote:Hello!
First of all – thank you for this code, we are using it and it's great!
Second of all – we have a little problem with this code. Few days ago our spoiler refused to work properly and it turned out that this JS causes this problem. I had to turn it off so we could use spoilers again. We are using new bbcodes a lot and after turning it off forum looks... well, bad. Is there any chance for an update? I can see that last update was in 2018 but I hope that you'll see this message somehow![]()
If you have problems with the code, you can request support here: https://help.forumotion.com/f43-scripts-coding-problems
Mihai- Forumember
-
Posts : 555
Reputation : 24
Language : Romanian, English
Location : Bucharest, Romania
Re: [Tutorial] Create New BBCode Tags
Hi @Mihai we do not offer support on codes made in this part of the forum.
The maker of the the codes made here are the ones to help them (If the member is still about and as this post is over 3 years old the members use this code at their own risk of it not working any more)
The maker of the the codes made here are the ones to help them (If the member is still about and as this post is over 3 years old the members use this code at their own risk of it not working any more)
Ape- Administrator
-
Posts : 17854
Reputation : 1903
Language : fluent in dork / mumbojumbo & English haha
skouliki and TonnyKamper like this post

» [WoW] bbcode tags?
» [Tutorial] BBCode Neon
» M:tG Card Tags on BBCode
» BBCode Jump to tags?
» Disable certain BBCode tags?
» [Tutorial] BBCode Neon
» M:tG Card Tags on BBCode
» BBCode Jump to tags?
» Disable certain BBCode tags?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum