[Tutorial] Create New BBCode Tags

by Daemon July 15th 2017, 6:00 pm

With this code you can create your own bbcode tags.

Image:
[Tutorial] Create New BBCode Tags Sem_ty13

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:

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:

by Guest July 15th 2017, 6:14 pm

Nice code, @Daemon. I was planning to make something like, but I guess there's no need for it now Smile

). I'll test it when I'll have time.

by Daemon July 15th 2017, 6:18 pm

Thank you very much, @Wolfuryo! You can test and opt for changes to improve.
[Tutorial] Create New BBCode Tags 1f601

by **Draxion** July 15th 2017, 6:24 pm

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.

by Daemon July 15th 2017, 6:30 pm

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]

by Guest July 15th 2017, 6:31 pm

@Draxion,

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.

by **Draxion** July 15th 2017, 6:34 pm

Nope, still doesn't work.

There's a syntax error in the coding.

by Guest July 15th 2017, 6:48 pm

I tested it on my punBB forum(the templates are heavily modified) and it's not working.
The console says this:

Code:: SyntaxError: expected expression, got ')'

It also says that the problem is at character 91609(real useful lol).
I don't know exactly what causes the error, but I noticed something in the code:

Code:: var getPost = $(".postbody , .blog_message");

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.

by Daemon July 15th 2017, 7:13 pm

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

@Edit:

I edited the post and ended up putting the code twice. HAHAHAH

Try it now, again... [Tutorial] Create New BBCode Tags 1f606

by **Draxion** July 15th 2017, 7:21 pm

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");

by Daemon July 15th 2017, 7:50 pm

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.

by **Draxion** July 15th 2017, 7:55 pm

Sorry, still getting the same error.

EDIT: My bad. I didn't refresh the page and therefore I took the same code. ;P hahah

by Daemon July 15th 2017, 8:00 pm

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? Very Happy

by **Draxion** July 15th 2017, 8:00 pm

Yes, works great! Yes

by Zzbaivong August 6th 2017, 3:46 am

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.

by Daemon March 28th 2018, 5:47 am

I leave here a suggestion for a bbcode tag:
[Tutorial] Create New BBCode Tags 1-8

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"]

by Daemon March 28th 2018, 4:33 pm

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"]

by Lik3lyLad April 15th 2018, 11:58 am

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.

by pedxz April 15th 2018, 1:13 pm

Hey and welcome to Forumotion,
change your code to this, ~~it's incomplete is just a suggestion of a tag, the code above~~:

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

Code:: [download="http://somelink.com"]

by Daemon May 19th 2018, 5:03 pm

The code has been updated! ^^

by Daemon May 21st 2018, 3:23 pm

Anyone who can test to prove the functionality of the code?

by pedxz May 21st 2018, 5:05 pm

@Daemon
testing in punbb3, worked perfectly!

by Daemon May 21st 2018, 11:50 pm

I added a step by step to improve understanding of the code.

UPDATED TO VERSION 1.321052018!!!!!

by Juviia May 6th 2022, 5:42 pm

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 [Tutorial] Create New BBCode Tags 1f62a

by Mihai May 6th 2022, 5:51 pm

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

Hello,

If you have problems with the code, you can request support here: https://help.forumotion.com/f43-scripts-coding-problems

by **Ape** May 6th 2022, 7:37 pm

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)