Adding text to a textarea using javascript

BlodoPKNZ · 12-24-2004

Ive been trying to do a bbcode style tags for my cms, and right now ive stopped at this as i dont have a clue about javascript, and needing to reload the page so php will get that it needs to display a tag in a textarea just doesnt cut it.

I dont want to stick with a "copy and paste the tags from a list" scenario so as to make my cms more intuitive. Also i searched the net about this and found nothing. Anyone know how to help me out?

scrowler · 12-27-2004

try reviewing some of the javascript in the Reply page of one of these BB's

BlodoPKNZ · 12-27-2004

Heres what i got from the source of a posting page in phpbb:

Code:

<script language="JavaScript" type="text/javascript">
<!--
// bbCode control by
// subBlue design
// www.subBlue.com

// Startup variables
var imageTag = false;
var theSelection = false;

// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;

var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);

bbcode = new Array();
bbtags = new Array('{b}','{/b}','{i}','{/i}','{u}','{/u}','{quote}','{/quote}','{code}','{/code}','{img}','{/img}','{url}','{/url}','{list}','{/list}','{list=}','{/list}'); 
//I had to change these into curly brackets because it didnt render properly in vbulletin. Change back into '[' and ']'. - Blodo
imageTag = false;

function helpline(help) {
	document.post.helpbox.value = eval(help + "_help");
}


function getarraysize(thearray) {
	for (i = 0; i < thearray.length; i++) {
		if ((thearray[i] == "undefined") || (thearray[i] == "") || (thearray[i] == null))
			return i;
		}
	return thearray.length;
}

function arraypush(thearray,value) {
	thearray[ getarraysize(thearray) ] = value;
}

function arraypop(thearray) {
	thearraysize = getarraysize(thearray);
	retval = thearray[thearraysize - 1];
	delete thearray[thearraysize - 1];
	return retval;
}


function checkForm() {

	formErrors = false;

	if (document.post.message.value.length < 2) {
		formErrors = "You must enter a message when posting.";
	}

	if (formErrors) {
		alert(formErrors);
		return false;
	} else {
		bbstyle(-1);
		//formObj.preview.disabled = true;
		//formObj.submit.disabled = true;
		return true;
	}
}

function emoticon(text) {
	var txtarea = document.post.message;
	text = ' ' + text + ' ';
	if (txtarea.createTextRange && txtarea.caretPos) {
		var caretPos = txtarea.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
		txtarea.focus();
	} else {
		txtarea.value  += text;
		txtarea.focus();
	}
}

function bbfontstyle(bbopen, bbclose) {
	var txtarea = document.post.message;

	if ((clientVer >= 4) && is_ie && is_win) {
		theSelection = document.selection.createRange().text;
		if (!theSelection) {
			txtarea.value += bbopen + bbclose;
			txtarea.focus();
			return;
		}
		document.selection.createRange().text = bbopen + theSelection + bbclose;
		txtarea.focus();
		return;
	}
	else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
	{
		mozWrap(txtarea, bbopen, bbclose);
		return;
	}
	else
	{
		txtarea.value += bbopen + bbclose;
		txtarea.focus();
	}
	storeCaret(txtarea);
}


function bbstyle(bbnumber) {
	var txtarea = document.post.message;

	txtarea.focus();
	donotinsert = false;
	theSelection = false;
	bblast = 0;

	if (bbnumber == -1) {
		while (bbcode[0]) {
			butnumber = arraypop(bbcode) - 1;
			txtarea.value += bbtags[butnumber + 1];
			buttext = eval('document.post.addbbcode' + butnumber + '.value');
			eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
		}
		imageTag = false;
		txtarea.focus();
		return;
	}

	if ((clientVer >= 4) && is_ie && is_win)
	{
		theSelection = document.selection.createRange().text; // Get text selection
		if (theSelection) {
			document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
			txtarea.focus();
			theSelection = '';
			return;
		}
	}
	else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
	{
		mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1]);
		return;
	}

	for (i = 0; i < bbcode.length; i++) {
		if (bbcode[i] == bbnumber+1) {
			bblast = i;
			donotinsert = true;
		}
	}

	if (donotinsert) {	
while (bbcode[bblast]) {
butnumber = arraypop(bbcode) - 1;
txtarea.value += bbtags[butnumber + 1];
buttext = eval('document.post.addbbcode' + butnumber + '.value');
eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
imageTag = false;
			}
			txtarea.focus();
			return;
	} else { 

		if (imageTag && (bbnumber != 14)) {			txtarea.value += bbtags[15];
			lastValue = arraypop(bbcode) - 1;				document.post.addbbcode14.value = "Img";				imageTag = false;
		}

		txtarea.value += bbtags[bbnumber];
		if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; 		arraypush(bbcode,bbnumber+1);
		eval('document.post.addbbcode'+bbnumber+'.value += "*"');
		txtarea.focus();
		return;
	}
	storeCaret(txtarea);
}

// From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
{
	var selLength = txtarea.textLength;
	var selStart = txtarea.selectionStart;
	var selEnd = txtarea.selectionEnd;
	if (selEnd == 1 || selEnd == 2)
		selEnd = selLength;

	var s1 = (txtarea.value).substring(0,selStart);
	var s2 = (txtarea.value).substring(selStart, selEnd)
	var s3 = (txtarea.value).substring(selEnd, selLength);
	txtarea.value = s1 + open + s2 + close + s3;
	return;
}

// Insert at Claret position. Code from
// http://www.faqts.com/knowledge_base/...d/1052/fid/130
function storeCaret(textEl) {
	if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

//-->
</script>

Got seriously baffled here..

scrowler · 12-31-2004

so, try something like this:

Code:

<script language="JavaScript">
function insertCode()
{
  document.post.YOURFIELDNAME.value = document.post.YOURFIELDNAME.value + '[tagtoinsert]';
}
</script>
<form>
<textarea name="YOURFIELDNAME">
textarea value -
</textarea>
<input type="button" name="addBold" value="BOLD" onClick="insertCode()">
</form>

if that works, you could use the same function to insert various tags, using passed variables in and out. im not sure how to do this in javascript because i don't really know how to use it except for basic functions, but something like:

Code:

<script language="JavaScript">
function insertCode(type)
{
  if(type == bold)
   {

           insert = '<b></b>';

   }
  document.post.YOURFIELDNAME.value = document.post.YOURFIELDNAME.value + insert;
}
</script>
<input type="button" name="addBold" value="BOLD" onClick="insertCode('bold')">
<input type="button" name="addItalic" value="BOLD" onClick="insertCode('italic')">
<input type="button" name="addUnderline" value="BOLD" onClick="insertCode('underline')">

as i said, i'm not a javascript person, but try something like that

BlodoPKNZ · 01-09-2005

Didnt work too good...Or maybe i did something wrong. Really far from being a javascript adept here

PHP much easier... Anyways i found a solution while browsing the internet:

Code:

<script language="JavaScript">
function insertbbcode(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
</script>

Inserts text at cursor position. Only thing i gotta figure out now is how to change button states on click

scrowler · 01-12-2005

cool, i'm afraid that breaks my javascript boundaries

ParaSnake · 01-12-2005

uhm..may be i can help..u can check my function to add smiley ^^

Code:

<html>
<head>
  <title></title>
<script>
function addSmiley(emoticon)
{
document.signform.comment.value=document.signform.comment.value+emoticon;
document.signform.comment.focus();
return;
}
</script>
</head>
<body>
<form name='signform' method = 'post' action = 'viewfile.php?act=updatecontent'> 
<textarea rows=10 cols=50 name='comment'></textarea>
<a href="javascript: addSmiley(':)')"><img src="smiley/happy.gif" border="0">
      <a href="javascript: addSmiley('B)')"><img src="smiley/cool.gif" border="0">
      <a href="javascript: addSmiley(':((')"><img src="smiley/crying.gif" border="0">
      <a href="javascript: addSmiley(':(')"><img src="smiley/sad.gif" border="0">

      <a href="javascript: addSmiley(':O')"><img src="smiley/surprised.gif" border="0">
      <a href="javascript: addSmiley(';)')"><img src="smiley/wink.gif" border="0">
      <a href="javascript: addSmiley('T_T')"><img src="smiley/angry.gif" border="0">
//the rest of code here :D

is there any problem with its?

BlodoPKNZ · 01-12-2005

I already enhanced the script kind of... Javascript is pretty straight forward but its unforgiving when it comes to syntax.

Code:

<script language="JavaScript">
var b = 2; 
function insertbbcode(field, v, tagadd, tagclose, buttonname, name) { 
    var newname = buttonname+"*";
	if (eval(v)%2 == 0) { 
        eval("window."+name+".value = newname;"); 
        var myValue = tagadd; 
    } else { 
        eval("window."+name+".value = buttonname;"); 
        var myValue = tagclose; } 
    eval(v+"++;"); 
//IE support
if (document.selection) {
field.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (field.selectionStart || field.selectionStart == '0') {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
field.value = field.value.substring(0, startPos)
+ myValue
+ field.value.substring(endPos, field.value.length);
} else {
field.value += myValue; }
}
</script>

//the buttons
<input name="bold" type="button" id="bold" value="B" style="font-weight: bold; width: 25px;" onClick="insertbbcode(document.newscp.econtent, 'b', '', '', 'B', 'document.newscp.bold');"> 
          <input name="italic" type="button" id="italic" value="i" style="font-style: italic; width: 25px;" onClick="insertbbcode(document.newscp.econtent, 'b', '', '', 'i', 'document.newscp.italic');"> 
          <input name="underline" type="button" id="underline" value="u" style="text-decoration: underline; width: 25px;" onClick="insertbbcode(document.newscp.content, 'b', '', '', 'u', 'document.editcp.underline');">

This also changes button states when clicked so the first click will insert the beginning tag and the second will insert the end tag, then repeat.

ParaSnake · 01-13-2005

koo bro...

blackhat · 02-09-2005

Is it possible to change the script so I can just mark some text and click the bold button the it applies a start and end tag before and after the marked text ?

Thanks

scrowler · 03-11-2005

yes it's possible, since im no javascript expert however, try looking at the source code of one of the forum installations like this one

BlodoPKNZ · 03-11-2005

I posted the code from phpbb upwards, but that doesnt do any good init.

Well the general idea behind that one would be to split the textarea into 3 strings:
- before the selection
- after the selection
- and the selection itself
Then you just put it back to one string like this:
before selection + start tag + selection + end tag + after selection (everything goes in a named variable) and output it to the textarea. That would work in ie, dunno about mozillas whacked interpretation of javascript.
Anyhow - im sure there are javascript references still in the internet. Google it and learn about the textarea commands etc. I mainly did it that way tho i was to lazy to implement this kind of type wrapping, so sorry: no code quoting