Skip to content

Instantly share code, notes, and snippets.

@Windastella
Created February 9, 2017 06:31
Show Gist options
  • Save Windastella/351440b57dd32a49b28422fda061f2d6 to your computer and use it in GitHub Desktop.
Save Windastella/351440b57dd32a49b28422fda061f2d6 to your computer and use it in GitHub Desktop.
SImple BBCode Toolbar (WIP) . Require JQuery
/*
BBTOOLBAR.CSS
Desc: Simple BBcode Editor toolbar.
Author:Nik Mirza
Email: nik96mirza(at)gmail(dot)com
*/
var bbToolbar = {
textbox:{},
init:(textarea)=>{
textbox = textarea;
var toolbar = "<div>";
toolbar += "<button onclick='bbToolbar.addBold();'>B</button>";
toolbar += "</div>";
$(toolbar).insertBefore(textbox);
},
insertBetweenText:(start, end, str, text1, text2)=>{
return str.substring(0,start) + text1 + str.substring(start, end) +text2 + str.substring(end);
},
insertText:(text1, text2)=>{
var start = textbox[0].selectionStart;
var end = textbox[0].selectionEnd;
var new_str = bbToolbar.insertBetweenText(start, end, textbox.val(), text1, text2);
textbox.val(new_str);
textbox.trigger('input');
},
addUrl:()=>{
bbToolbar.insertText("[url]","[/url]");
},
addImg:()=>{
bbToolbar.insertText("[img]","[/img]");
},
addYoutube:()=>{
bbToolbar.insertText("[youtube]","[/youtube]");
},
addCode:()=>{
bbToolbar.insertText("[code]","[/code]");
},
addQuote:()=>{
bbToolbar.insertText("[quote]","[/quote]");
},
addBold:()=>{
bbToolbar.insertText("[b]","[/b]");
},
addItalic:()=>{
bbToolbar.insertText("[i]","[/i]");
},
addUnderline:()=>{
bbToolbar.insertText("[u]","[/u]");
},
addColor:(color)=>{
bbToolbar.insertText("[color="+color+"]","[/color]");
},
addSize:(size)=>{
bbToolbar.insertText("[size="+size+"]","[/size]");
},
addCenter:()=>{
bbToolbar.insertText("[center]","[/center]");
},
addLeft:()=>{
bbToolbar.insertText("[left]","[/left]");
},
addRight:()=>{
bbToolbar.insertText("[right]","[/right]");
},
addUList:()=>{
bbToolbar.insertText("[ul]","[/ul]");
},
addOList:()=>{
bbToolbar.insertText("[ol]","[/ol]");
},
addList:()=>{
bbToolbar.insertText("[list]","[/list]");
},
addListItem:()=>{
bbToolbar.insertText("[li]","[/li]");
},
addTable:()=>{
bbToolbar.insertText("[table]","[/table]");
},
addTableRow:()=>{
bbToolbar.insertText("[tr]","[/tr]");
},
addTableContentHeader:()=>{
bbToolbar.insertText("[th]","[/th]");
},
addTableContent:()=>{
bbToolbar.insertText("[td]","[/td]");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment