Hey guys, Mr.EasyBB here with an EASY tagging system. All you have to do is follow step by step on what to do here! Check out all the variables and exactly how you can customize this awesome script!

STEP 1: CSS
[hc = CSS]

Code:


#errorMess:before {
content: '';
float: left;
border-left: 10px solid transparent;
border-bottom: 15px solid rgb(167, 63, 63);
margin-top: -15px;
}
#errorMess:after {
border-right: 80px solid transparent;
border-top: 14px solid #a73f3f;
content: '';
float: right;
margin-top: 10px;
}
.tag {
background: rgb(182, 182, 182);
border: 1px solid rgb(133, 133, 133);
color: #000!important;
box-shadow: inset 0px 4px 6px rgb(224, 224, 224);
text-decoration: none;
margin: 0 3px;
border-radius: 3px;
padding: 3px 9px;
float: left;
}
#errorMess {
background: #c04848;
bottom: -45px;
box-shadow: 0 4px 7px rgba(0,0,0,0.44);
display: none;
height: 50px;
left: -5px;
position: absolute;
width: 61%;
}
#errorMess span {
font-weight: bold;
font-size: 14px;
line-height: 40px;
padding: 0 28px;
color: rgb(255, 255, 255);
float:left;
width:100%;
}
#errClose {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fcb2b1 !important;
font-family: Arial,sans-serif;
top: 2px;
right: 5px;
cursor: pointer;
padding: 4px 8px;
}
#tagging{border:none;
background:transparent;
width:100%;
height:35px;
position:relative;
min-width:50px;
}
.innerTags {
height: 30px;
line-height: 30px;
}
#tagging:focus{outline:none}
#tag_editor{
background:#fff;
border:1px solid #000;
overflow:hidden;
white-space:nowrap;
}
#tagger{
float:left;
width:0px;
position:relative;
line-height:30px;
height:35px;
}
.tagged {
padding: 0px 12px 0px 5px;
margin: 2px 2px;
border-radius: 3px;
float: left;
cursor: pointer;
}
.tag{
border:1px solid #000;
padding:3px 5px;
background:#c3c3c3;
margin:0px 3px;
}
.silver{
background: rgb(226, 226, 226);
border: 1px solid rgb(170, 170, 170);
box-shadow: inset 0px 5px 5px rgb(247, 247, 247);
}
.red {
background: rgb(255, 0, 0);
border: 1px solid rgb(189, 0, 0);
box-shadow: inset 0px 5px 5px rgb(255, 128, 128);
}
.blue {
background: rgb(68, 161, 223);
border: 1px solid rgb(25, 116, 177);
box-shadow: inset 0px 5px 5px rgb(106, 192, 250);
}
.black {
background: rgb(41, 41, 41);
border: 1px solid rgb(0, 0, 0);
box-shadow: inset 0px 5px 5px rgb(102, 102, 102);
color: #FFF;
}
.green {
background: rgb(23, 146, 0);
border: 1px solid rgb(13, 82, 0);
box-shadow: inset 0px 5px 5px rgb(16, 202, 0);
}
.yellow {
background: rgb(225, 235, 0);
border: 1px solid rgb(0, 0, 0);
box-shadow: inset 0px 5px 5px rgb(255, 255, 0);
}


[/hc]

STEP 2: JavaScript

[hc=JavaScript]

Code:


$(function() {
var addArea = $('dd.dd-textarea') || $('dd.frm-textarea') ;
if(addArea) {
$('#text_editor_textarea').parent().after('<dt><label for="tagg_container">Tags :</label></dt><dd class="dd-textarea" style="position:relative"><div id="tagg_container"><div id="tag_editor"><span id="tagger"></span><input type="text" id="tagging" placeholder=""></div></div><div id="errorMess"><div id="errClose">X</div></div></dd>');
}
var  input = $('#tagging'),
     width,
    padding,
         tagged = $('#tagger'),
         taggs = $('.tagged'),
         editor = $('#tag_editor'),
    textarea = $('textarea'),
    send = $('.frm-buttons input[type="submit"]'),
         post = $('.post'),
    limitTags = true,
    limited = 10,
    tagAllowed = true,
    sortable = true,
         colorize = "black",
    triggers = {space:32,enter:13,tab:9},
    triggerKeys = ["space"],
         allowedTags= ["Hello","This","Is","Test"],
         errorProcess ="This Tag is Not Allowed. Please See our List of Tags",
         errorMess=  $('#errorMess'),
         errorMessText = "You need to fill out the rest of the Form!",
    placeholder= "Add up to 5 tags(seperate tags with spaces)",
//DO NOT EDIT ANYTHING UNDER THIS STATEMENT
tagSize=taggs.length;var a=parseInt(tagged.outerWidth(),10),b=parseInt(input.outerWidth(),10),c=parseInt(editor.outerWidth(),10),d=a+b;$('#tagging').attr('placeholder',placeholder);input.on('keypress',function(event){var arr=$.map(triggerKeys,function(el,i){return triggers[el];});if($.inArray(event.which,arr)!=-1){event.preventDefault();var inputVal=input.val();if(inputVal===""){errorMess.children('span').remove();errorMess.prepend('<span>No Spaces Allowed In Tags<span>');errorMess.slideDown();}else{if(tagAllowed===true){var isAllowedTag=false;for(var i=0;i<allowedTags.length;i++){var aTags=allowedTags[i];if(input.val().toLowerCase()===aTags.toLowerCase()){isAllowedTag=true;break;}}if(isAllowedTag){tagged.append('<span unselectable="on" class="tagged '+colorize+'" title="Click To Delete">'+inputVal.trim()+'</span>');tagSize=$('.tagged').length;var ele=$('.tagged').last(),subtract=parseInt(ele.outerWidth(true),10);input.width(input.width()-subtract);tagged.width(tagged.width()+subtract);input.val("");input.css({color:'#000',marginLeft:'5px'});}else{errorMess.children('span').remove();errorMess.prepend('<span>'+errorProcess+'<span>');errorMess.slideDown();}}else{tagged.append('<span unselectable="on" class="tagged '+colorize+'" title="Click To Delete">'+inputVal.trim()+'</span>');tagSize=$('.tagged').length;var ele=$('.tagged').last(),subtract=parseInt(ele.outerWidth(true),10);input.width(input.width()-subtract);tagged.width(tagged.width()+subtract);input.css('marginLeft','5px');input.val("");input.css('color','#000');}if(limitTags===true){if(tagSize===limited){input.hide();}}}}else{if(input.width()<=50){input.css('width','+=4px');}}});input.on('keyup',function(){if(tagAllowed===true){for(var i=0;i<allowedTags.length;i++){var aTags=allowedTags[i];if(input.val().toLowerCase()===aTags.toLowerCase()){input.css('color','#0000FF');}}}ui=false;if(ui===true){ui=false;}if(sortable===true){ui=true;if(ui=true){$('#tagger').sortable();}}});$(document).on('dblclick','.tagged',function(){var addWidth=parseInt($(this).outerWidth(true),10);$(this).remove();input.width(input.width()+addWidth);tagged.width(tagged.width()-addWidth);input.css('marginLeft','0px');if(input.is(':hidden')){input.show();tagSize=taggs.length;}});var click=false;$('.frm-buttons input[type="submit"]').click(function(event){var tags=$('.tagged');if(click===true){click=false;return;}event.preventDefault();if(textarea.val()<1){click=false;errorMess.children('span').remove();errorMess.prepend("<span>"+errorMessText+"</span>");errorMess.slideDown();}else{if(tags){click=false;for(var i=0;i<tags.length;i++){textarea.val(textarea.val()+"[tag]"+$(tags[i]).text()+"[/tag]");}input.val("");tags.remove();click=true;}else{if(textarea.val()<1){click=false;}else{click=true;}}}if(click===true){$(this).trigger('click');}});post.append('<div class="tagEle">Related Tags: <div class="innerTags"></div></div>');$('.post').html(function(){return $(this).html().replace(/\[tag\]/g,'<a href="/search?mode=searchbox&search_keywords={CONTENT}&show_results=posts" class="tag">').replace(/\[\/tag\]/g,'</a>');});var tag=$('.tag');tag.attr('href',function(){return $(this).attr('href').replace(/{CONTENT}/g,$(this).text());});$('#errClose').click(function(){errorMess.fadeOut();errorMess.children('span').remove();});var post=$('.post');for(var i=0;i<post.length;i++){var a=$(post[i]).find('.tag');for(var j=0;j<a.length;j++){$(a[j]).appendTo($(post[i]).find('.innerTags'));}}if(sortable===true){var sort=document.createElement('script');sort.src="http://code.jquery.com/ui/1.10.3/jquery-ui.js";sort.type="text/javascript";sort.id="sortable";$('body').append(sort);}
});


[/hc]

Now to the presets and changes you can/have to make:


First to make this all work for your Forum-

var addArea = $('dd.dd-textarea') || $('dd.frm-textarea') ;

This must be changed per your forum. 

• phpBB2: ????
  
• punBB: var addArea = $('dd.dd-textarea') || $('dd.frm-textarea') ;
  
• phpBB3: var addArea = $('dd.dd-textarea') || $('#textarea_content') ;
  
• invision: var addArea = $('dd.dd-textarea') || $('#textarea_content.posting-block') ;
  

PRESETS
[hc=Preset Options]
limitTags: boolean (true or false) 
If true limitTags is on, making the next options important

limited: integer (how many tags you want users to have. If limitTags is false don't worry about this)

tagAllowed = boolean (true or false)
if true please see allowedTags

sortable = boolean (true or false)
If true, jQuery UI will be added and you can sort the tags in any order!


colorize: Color codes
Allowed Colors are:

• Red
  
• Blue
  
• Green
  
• Black
  
• Silver
  

You can make your own and add the class name to this inside quotes

triggers = object
Triggers are available keys to make your tags selected. triggerKeys is what you can play with! Don't change this at all!

triggerKeys = array
Space is the triggerKey, meaning it will add the word after hitting space. You can add more than one.

EX: ["space","enter","tab"];

allowedTags= array
Array of Allowed words, add as many as you want. 

EX: ["EasyBB","AvacWeb","HTML","CSS","JavaScript","CSS"];

errorProcess ="This Tag is Not Allowed. Please See our List of Tags",
Text String- Change the text of the alert box if you want to for Tags Limited!

errorMessText = "You need to fill out the rest of the Form!",
Text String- Change the text of the alert box, appears if the form isn't filled out completely.

placeholder= "Add up to 5 tags(seperate tags with spaces)",
text String- The Placeholder for the input, change this to whatever you'd like your input to say!

[/hc]

More features for this will be added.

[You must be registered and logged in to see this link.]