Stephen Groom Taking a shot at becoming a Poker Pro

JAVASCRIPT: Add BBCode buttons to a form

[i]There is a follow-up tutorial to this available [url=http://www.groomi.net/JAVASCRIPT:_Add_BBCode_buttons_to_a_form_(REVISITED)-,46]here[/url] which further improves the script adding another feature which improves ease and convenience of use.[/i]

Having just completed my code for buttons to insert BBCode into a textarea, I thought it was time to share my code with the world wide web.

First I will show you the HTML code I use at the time of this post

[code]<input type="button" onclick="bbcode_ins('comment', 'b')" value="B" style="width:15px;font-weight:bold;" />
<input type="button" onclick="bbcode_ins('comment', 'u')" value="_" style="width:15px;" />
<input type="button" onclick="bbcode_ins('comment', 'i')" value="I" style="width:15px;font-style:italic;" />
<input type="button" onclick="bbcode_ins('comment', 'img')" value="img" style="width:25px;" />
<input type="button" onclick="bbcode_ins('comment', 'url')" value="url" style="width:25px;" />
<input type="button" onclick="bbcode_ins('comment', 'php')" value="php" style="width:25px;" />
<input type="button" onclick="bbcode_ins('comment', 'code')" value="code" style="width:30px;" />[/code]

This basically puts a button for each available BBCode tag into the form where the textarea is located. The textarea in this example is called comment and when you click the button associated with the tag the following javascript function is called:

[i]bbcode_ins([b]field[/b], [b]tag[/b]);[/i]

Here is the javascript associated with the [i]bbcode_ins()[/i] function

[code]function bbcode_ins(fieldId, tag)
{
field=document.getElementById(fieldId);
if(tag=='b' || tag=='i' || tag=='u' || tag == 'php' || tag == 'code')
{
if (document.selection)
{
field.focus();
sel = document.selection.createRange();
sel.text = '[' + tag + '][/' + tag+']';
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + '][/' + tag+']'
+ field.value.substring(endPos, field.value.length);
}
}
else if(tag == 'img')
{
var path = prompt('Enter image path', 'http://');
if(!path)
{
return;
}
if (document.selection)
{
field.focus();
sel = document.selection.createRange();
sel.text = '[' + tag + ']' + path + '[/' + tag+']';
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + ']' + path + '[/' + tag+']'
+ field.value.substring(endPos, field.value.length);
}
}
else if(tag == 'url')
{
var url = prompt('Enter link URL', 'http://');
var linkText = prompt('Enter link text', '');
if(!url || !linkText)
{
return;
}
if (document.selection)
{
field.focus();
sel = document.selection.createRange();
sel.text = '[' + tag + '='+url+']' + linkText + '[/' + tag+']';
}
//MOZILLA/NETSCAPE/SAFARI support
else if (field.selectionStart || field.selectionStart == 0)
{
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.focus();
field.value = field.value.substring(0, startPos)
+ '[' + tag + '='+url+']' + linkText + '[/' + tag+']'
+ field.value.substring(endPos, field.value.length);
}
}
}[/code]

[b]Now to explain the code:[/b]

[i]field=document.getElementById(fieldId);[/i]
This sets the variable [i]field[/i] to the element to be inserted into. eg. <input id="fieldId" />

The second parameter tag is tested to ask a variety of different questions depending on whether it is a hyperlink, image or simple bbcode tag. The important code is inside the if statements.

The first if inside of these is for IE browsers only. The line [i]if (document.selection)[/i] will only evaluate true if the code is executed in internet explorer. The next few lines of code then add the bbcode and give focus to the field.

The next alternative is with [i]else if (field.selectionStart || field.selectionStart == 0)[/i] and this evaluates to true for firefox/mozilla/safari etc etc. Inside this statement is another method of performing the same task for browsers that don't support the IE method.

[b]In summary[/b]
There it is, the code that makes my wonderful bbcode buttons work. Hope it can be of some use to somebody. If you have any questions/suggestions regarding this post please direct them to the comments

Thanks
Stephen
x