Membuat BBcode pada textarea dengan jQuery

Kali ini saya share cara membuat bbcode pada textarea dengan menggunakan jquery, sebelumnya apa sih yang namanya bbcode itu? bbcode adalah bahasa markup yang popular dan sederhana yang mirip dengan html seperti membuat huruf tebal, miring, garis bawah dan lain-lain juga ini biasanya digunakan pada forum-forum.

Dan sekarang kita coba buat tombol bbcode pada textarea dengan menggunakan jquery.
Javascript jquerynya seperti pada kode dibawah ini.

function addText(Text,Message){
var obj = document.form.textareabbcode; // Pilih textarea
obj.focus();
if (document.selection && document.selection.createRange)  // Internet Explorer  
{
sel = document.selection.createRange();
if (sel.parentElement() == obj)  sel.text = Text;
}
else if (typeof(obj) != "undefined")  // Firefox
{
var longueur = parseInt(obj.value.length);
var selStart = obj.selectionStart;
var selEnd = obj.selectionEnd;
obj.value = obj.value.substring(0,selStart) + Text + obj.value.substring(selEnd,longueur);
 }
else obj.value += Text;
obj.focus();
}


function addTags(Tag,fTag,Message)
{
var obj = document.form.textareabbcode;// Pilih textarea
obj.focus();
if (document.selection && document.selection.createRange)  // Internet Explorer
{
sel = document.selection.createRange();
if (sel.parentElement() == obj)  sel.text = Tag + sel.text + fTag;
}
else if (typeof(obj) != "undefined")  // Firefox
{
var longueur = parseInt(obj.value.length);
var selStart = obj.selectionStart;
var selEnd = obj.selectionEnd;
obj.value = obj.value.substring(0,selStart) + Tag + obj.value.substring(selStart,selEnd) + fTag + obj.value.substring(selEnd,longueur);
}
else obj.value += Tag + fTag;
obj.focus();
}

Dan sekarang kita membuat form dengan textarea yang akan kita tambahkan tombol bbcode tersebut

<form name="form">

<textarea name="textareabbcode" class="textareabbcode" wrap="VIRTUAL"></textarea><br />

 <!-- BB code -->
 
<a title="Bold" onmousedown="addTags('[B]','[/B]')" class="tombolbbcode"><b>B</b></a>

<a title="Italic" onmousedown="addTags('[I]','[/I]')" class="tombolbbcode"><i>I</i></a>

<a title="Underline" onmousedown="addTags('[U]','[/U]')" class="tombolbbcode"><u>U</u></a>

<a title="Quote" onmousedown="addTags('[QUOTE]','[/QUOTE]')" class="tombolbbcode"><b>QUOTE</b></a>

<a title="Url" onmousedown="addTags('[URL=http://]','[/URL]')" class="tombolbbcode"><b>URL</b></a>

<a title="Image" onmousedown="addTags('[IMG]','[/IMG]')" class="tombolbbcode"><b>IMG</b></a>

</form>

Nah hanya itu yang bisa saya share untuk membuat bbcode pada textarea dengan jquery. Semoga bermanfaat