[Tutorial] Create New BBCode Tags

Go down

[Tutorial] Create New BBCode Tags

Post by Daemon on July 15th 2017, 6:00 pm

With this code you can create your own bbcode tags.

Image:


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>
'SOME TEXT' will be added automatically if you do not have a predefined title

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>'
The [alert] tag would be replaced by the html structure defined above.
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'
            };
        }
    }
}
See the following image as the effect of this code would be:
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:


Last edited by Daemon on June 16th 2018, 6:39 pm; edited 35 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Guest on 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.

Guest
Guest


Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on July 15th 2017, 6:18 pm


Thank you very much, @Wolfuryo! You can test and opt for changes to improve.
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Draxion on 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.


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 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2233
Reputation : 283
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on 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]
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Guest on 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.

Guest
Guest


Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Draxion on July 15th 2017, 6:34 pm

Nope, still doesn't work.

There's a syntax error in the coding.


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 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2233
Reputation : 283
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Guest on 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.

Guest
Guest


Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on 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.


@Edit:

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

Try it now, again...
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Draxion on 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");


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 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2233
Reputation : 283
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on 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.
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Draxion on 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


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 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2233
Reputation : 283
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on 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
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Draxion on July 15th 2017, 8:00 pm

Yes, works great! Yes


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 when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2233
Reputation : 283
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Zzbaivong on 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.
avatar
Zzbaivong
Forumember

Posts : 100
Reputation : 51
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on March 28th 2018, 5:47 am

I leave here a suggestion for a bbcode tag:

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 May 21st 2018, 11:52 pm; edited 3 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on 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"]


Last edited by Daemon on May 21st 2018, 11:52 pm; edited 3 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Lik3lyLad on 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.
avatar
Lik3lyLad
New Member

Posts : 3
Reputation : 1
Language : English

http://infamous.forumotion.org

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by pedxz on 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"]
avatar
pedxz
Forumember

Male Posts : 158
Reputation : 32
Language : speaker daemonium & português
Location : Portugal

https://ajuda.forumeiros.com/u62843

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on May 19th 2018, 5:03 pm

The code has been updated! ^^
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on May 21st 2018, 3:23 pm

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


Last edited by Daemon on May 21st 2018, 11:54 pm; edited 1 time in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by pedxz on May 21st 2018, 5:05 pm

@Daemon
testing in punbb3, worked perfectly!
avatar
pedxz
Forumember

Male Posts : 158
Reputation : 32
Language : speaker daemonium & português
Location : Portugal

https://ajuda.forumeiros.com/u62843

Back to top Go down

Re: [Tutorial] Create New BBCode Tags

Post by Daemon on May 21st 2018, 11:50 pm

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

UPDATED TO VERSION 1.321052018!!!!!
avatar
Daemon
Forumember

Posts : 101
Reputation : 81
Language : Português

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum