Link to home
Start Free TrialLog in
Avatar of azzy86
azzy86

asked on

Inserting into a textarea, BB code

Ok basically Ive coded a forum but one thing I cant do is javascript, so I thought you guys could help :)

Ive searched everywhere for what I want, but short of robbing miniforum's insertion method my results have been weak. I even found one result here, but it simply inserted /<\B/> and that wasnt inserted unless you click on the textarea, ontop of that it required the main bit of javascript to have a seperate string for each tag.

I want a piece of code thats fairly dynamic, for example I need the function to use vars instead of set strings, so the real work is done with the insert button. The good example I found have the clickable button have something like javascript([b]); type thing.

Im sure you know what I want, thx :D
Avatar of stu215
stu215
Flag of United States of America image

Ponder... What exactly are you trying to do?

Strip html / code out of textareas so people cant make pop-ups n stuff in your forum? or
to add formatting to text areas while preventing people from inserting code into them? or ???

~Stu :-)
Avatar of azzy86
azzy86

ASKER

No, you know how vbulletin or other forums have a quick reply box, and on that you have bold, italic and underline buttons that you click and it inserts the [b] and then click again and it inserts [/b] kinda thing.
you would just make a javascript function to copy the value from the textbox and append to it the [b] or [/b] based on a binary counter  o = [b] 1=[/b] and you would need to make a function for each category you wanted :

-Bold : [b]
-Italic : [i]
-Underline : [u]
-etc ...

-------- The Function  -----------
<script>
var myBoldSwitch='1'; // Sets the Bold cntr to 0 to start

function addBold(){
    if (myBoldSwitch > 0){
        document.form1.mytxt.value=document.form1.mytxt.value+"[B]";
            document.form1.mytxt.focus();
            myBoldSwitch=0;
    } else {
        document.form1.mytxt.value=document.form1.mytxt.value+"[/B]";
            document.form1.mytxt.focus();
            myBoldSwitch=1;
    }
}
</script>

<body>
<form name="form1">
<textarea name="mytxt" cols="80" rows="4"></textarea>
<input name="Bold" onClick="addBold();" type="button" value="Bold">
</form>
</body>
if You wanted to modify that for a different thing you would :

--create a new global switch cntr for the second case you are using
--copy the whole function
--change the function name
--change [B] to whatevr [I], [U], etc...
--change [/B] to whatevr [/I], [/U], etc...
--change the name of the Switch to the new one you created...
-- make a Button for it and in the onClick have it call the name of the function...

~Stu :-)
Avatar of azzy86

ASKER

A new function for each insert, ha no. The method I did find was much more simple, Id just rather not rip it off.
I remember I wrote some kind of script like this a while back, but I can't find it right now... :(
*digging feverishly through windows explorer*
Hmm, working on a more flexible version but having problems with the case statement atm...
so you just send a letter via the button...

~Stu
K, this may be better for ya

function chngStatus(obj, chngVal){
      switch (obj) {
      case "B":
            mySwitch[0]=chngVal
            break
      case "I":
            mySwitch[1]=chngVal
            break
      case "U":
            mySwitch[2]=chngVal
            break
      }
}

var mySwitch=new Array("1", "1", "1", "1") // contains the cntrs for the diff vars

function addFormat(obj, curSwitch){
    if (mySwitch[curSwitch] != 0){
        document.form1.mytxt.value=document.form1.mytxt.value+"["+obj+"]";
            document.form1.mytxt.focus();
            chngStatus(obj, '0');
    } else {
        document.form1.mytxt.value=document.form1.mytxt.value+"[/"+obj+"]";
            document.form1.mytxt.focus();
            chngStatus(obj, '1');
    }
}
</script>

<body>
<form name="form1">
<textarea name="mytxt" cols="80" rows="4"></textarea><br>
<input name="Bold" onClick="addFormat('B', '0');alert(mySwitch);" type="button" value="Bold"><br>
<input name="Bold" onClick="addFormat('I', '1');alert(mySwitch);" type="button" value="Italic"><br>
<input name="Bold" onClick="addFormat('U', '2');alert(mySwitch);" type="button" value="Underline">
</form>
</body>
to modiy this one:

--Add a "1" to mySwitch for each case you want to support
--Add a button with the letter you want to send, and the place of its cntr in the array
--Add a case for the letterwith the appropriate Switch from the array... (now that im lookin at it on here i could have passed the curSwitch to that other function too...


-- This more what u were lookin for or ?
~Stu :-)
Errr This one should be better, I took the alert out which i forgot to remove, and it passes the switch val from the main function to the sub function...

-----------------------------------------------------------------
<html>
<script>
function chngStatus(obj, chngVal, curSwitch){
      switch (obj) {
      case "B":
            mySwitch[curSwitch]=chngVal
            break
      case "I":
            mySwitch[curSwitch]=chngVal
            break
      case "U":
            mySwitch[curSwitch]=chngVal
            break
      }
}

var mySwitch=new Array("1", "1", "1", "1") // contains the cntrs for the diff vars

function addFormat(obj, curSwitch){
    if (mySwitch[curSwitch] != 0){
        document.form1.mytxt.value=document.form1.mytxt.value+"["+obj+"]";
            document.form1.mytxt.focus();
            chngStatus(obj, '0', curSwitch);
    } else {
        document.form1.mytxt.value=document.form1.mytxt.value+"[/"+obj+"]";
            document.form1.mytxt.focus();
            chngStatus(obj, '1', curSwitch);
    }
}
</script>

<body>
<form name="form1">
<textarea name="mytxt" cols="80" rows="4"></textarea><br>
<input name="Bold" onClick="addFormat('B', '0');" type="button" value="Bold"><br>
<input name="Bold" onClick="addFormat('I', '1');" type="button" value="Italic"><br>
<input name="Bold" onClick="addFormat('U', '2');" type="button" value="Underline">
</form>
</body>
</html>

-----------------------------------------------------------------

Modifications:
--Add a "1" to mySwitch for each case you want to support
--Add a button with the letter you want to send, and the place of its cntr in the array
--Add a case for the letter (just copy one of the cases there and Change the letter)

~Stu :-)
Ack, couldn't find that one so I wrote up a new one:

--------------------------------------------------
<form>
<textarea style="width:100%;height:200;" name=txt onkeyup=getpos() onmouseup=getpos()></textarea><br>

<input type=button value="B" onclick="insert('b');">
<input type=button value="I" onclick="insert('i');">
<input type=button value="U" onclick="insert('u');">

<br><input type=hidden name=pos>
</form>

<script>

//ADD NEW TAGS HERE
var end=new Array();
end['b']=false;
end['i']=false;
end['u']=false;

function insert(c){
pos.text="["+(end[c]?"/":"")+c+"]";
end[c]=end[c]?false:true;
document.forms[0].txt.focus();
}

function getpos(){pos=document.selection.createRange();}
</script>
</body>
--------------------------------------------------

BTW, my version inserts the tags wherever the cursor is.
Here's a version that supports special tags (e.g. links and images). You can define how they look in the array 'special.'
--------------------------------------------------
<form>
<textarea style="width:100%;height:200;" name=txt onkeyup=getpos() onmouseup=getpos()></textarea><br>

<input type=button value="B" onclick="insert('b');">
<input type=button value="I" onclick="insert('i');">
<input type=button value="U" onclick="insert('u');">
<input type=button value="A" onclick="insert('a');">
<input type=button value="IMG" onclick="insert('img');">

<br><input type=hidden name=pos>
</form>

<script>

var end=new Array();
end['b']=false;
end['i']=false;
end['u']=false;
end['a']=false;

var special=new Array('a','img');
  special['a']=new Array('<a href=url.htm>','</a>');
  special['img']=new Array('<img src=url.htm>','<img src=url.htm>');

function insert(c){
var spec=';'+special.join(';')+';';
if(spec.indexOf(';'+c+';')!=-1){
  pos.text=end[c]?special[c][1]:special[c][0];
}else{pos.text="["+(end[c]?"/":"")+c+"]";}
end[c]=end[c]?false:true;
document.forms[0].txt.focus();
}

function getpos(){pos=document.selection.createRange();}
</script>
</body>
Avatar of azzy86

ASKER

stu215 thanks for trying, but lil is more on track to what Id like.

The special array isnt necessary, Im using bb code, I tried added img and url to the first array but the script stopped working, eek!

Also is there away you can make it insert it into the text field without being pressed into first?
Avatar of azzy86

ASKER

So far I have

--
<form>
<textarea style="width:100%;height:200;" name="txt" onkeyup="getpos()" onmouseup="getpos()"></textarea><br>

<input type=button value="B" onclick="insert('b');">
<input type=button value="I" onclick="insert('i');">
<input type=button value="U" onclick="insert('u');">
<input type=button value="URL" onclick="insert('url');">
<input type=button value="IMG" onclick="insert('img');">
<input type="hidden" name="pos"></form>

<script>
var end=new Array();
end['b']=false;
end['i']=false;
end['u']=false;
end['a']=false;
end['img']=false;

function insert(c)
{pos.text="["+(end[c]?"/":"")+c+"]";
end[c]=end[c]?false:true;
document.forms[0].txt.focus();}

function getpos(){pos=document.selection.createRange();}
</script>
</body>
--
Avatar of azzy86

ASKER

Ok Ive updated it below, it works amazingly well :) Thanks alot.

The only two things left to figure out are followed
How to make pressing the button focus on the textarea and insert the code
Close all tags by a button?

I tried buying more points because I felt you guys really deserve it but unfortunately they dont except british debit cards :/
Avatar of azzy86

ASKER

<form><input type="button" value="Bold" onclick="insert('b');">
<input type="button" value="Italic" onclick="insert('i');">
<input type="button" value="Underline" onclick="insert('u');">
<input type="button" value="Link" onclick="insert('url');">
<input type="button" value="Image" onclick="insert('img');">
<input type="button" value="Email" onclick="insert('email');">
<input type="button" value="Bullet" onclick="insert('*');">
<input type="hidden" name="pos"><br>
<textarea name="txt" cols="100%" rows="10" onmouseup="getpos()" onkeyup="getpos()"></textarea></form>

<script>
var end=new Array();
end['b']=false;
end['i']=false;
end['u']=false;
end['a']=false;
end['img']=false;
end['email']=false;

      var special= new Array('*');
      special['*']=new Array('[*]');

      function insert(c)
      {var spec=';'+special.join(';')+';';
      
      if(spec.indexOf(';'+c+';')!=-1){
      pos.text=end[c]?special[c][0]:special[c][0];}
      
      else
      
      {pos.text="["+(end[c]?"/":"")+c+"]";}
      end[c]=end[c]?false:true;
      document.forms[0].txt.focus();}

function getpos()
{pos=document.selection.createRange();}
</script>
</body>
ASKER CERTIFIED SOLUTION
Avatar of lil_puffball
lil_puffball
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of azzy86

ASKER

Man I love you, LOVE YOU! You rock and thanks alot :)
Avatar of azzy86

ASKER

eek small problem, I have these on the text area

 <textarea name="post_text" rows="10" onkeyup="TrackCount(this,'textcount', <?PHP echo $forum_properties['max_char']; ?>)" onkeypress="LimitText(this, <?PHP echo $forum_properties['max_char']; ?>)">

Dreamweaver says I cant do both, help?
I think this should be fine:

<textarea name="post_text" rows="10" onmouseup="getPos();" onkeyup="getPos();TrackCount(this,'textcount', <?PHP echo $forum_properties['max_char']; ?>)" onkeypress="LimitText(this, <?PHP echo $forum_properties['max_char']; ?>)">

Thanks for the points and the A. :)
Avatar of azzy86

ASKER

Hi, I tried that and now neither the count or buttons work :o

http://www.wuggawoo.com/forumz/index/thread/232/1/#6692 (NOTE the forums bugged atm cos my real host is down so Ive restored an old backup to test on)...

Do you have msn? Im sure it'd take us 2 mins to fix0r it without spamming here :p
Well, I can't post anything on that page, since I don't have an account.
I do have msn:
lil_puffball @ hotmail.com
Hey,

        No prob, sorry I couldnt help ya out more, had to go home for the weekend...

--I took a look at lil_puffball's script n it was definitely better than what i tossed together :-)
~Stu ;-)
Avatar of azzy86

ASKER

Theres still alittle problem with it in ie based browsers

http://www.wuggawoo.com/forumz//index/thread/1

seems it cant get the post_text even thought it does o_O
Thanks stu. :)
Your code was also very good, don't be so harsh on yourself. :)

azzy86, found the problem:

//insert main
      function insert(c, Fname)
      {var spec=';'+special.join(';')+';';

      if(spec.indexOf(';'+c+';')!=-1)
      {doInsert(end[c]?special[c][1]:special[c][0]);}
      
      else

      //PROBLEM RIGHT HERE!!! YOU ARE NOT PASSING THE FORM IN!!!   <--------------------
      {doInsert("["+(end[c]?"/":"")+c+"]");
      Fname.post_text.blur();}

      Fname.post_text.focus();
      end[c]=end[c]?false:true;}
      



Here's the corrected code:

//insert main
      function insert(c, Fname)
      {var spec=';'+special.join(';')+';';

      if(spec.indexOf(';'+c+';')!=-1)
      {doInsert(end[c]?special[c][1]:special[c][0],Fname);}
      
      else
      
      {doInsert("["+(end[c]?"/":"")+c+"]",Fname);
      Fname.post_text.blur();}

      Fname.post_text.focus();
      end[c]=end[c]?false:true;}
      
//do insert
      function doInsert(post_text, Fname)
      {if(document.selection && pos)
      {pos.text = post_text;}
      
      else
      
      {alert(Fname);Fname.post_text.value+=post_text;alert(1)}}
azzy86,

to correct the endAll, use this:

function endAll(frm){
for(i=0;i<end.length;i++){
 if(end[end[i]]){insert(end[i],frm);}
}
}

and when you call it:

onclick="endAll(this.form);"

Let me know if this doesn't correct the problem.
Avatar of azzy86

ASKER

That works like a charm, thanks alot :D
Avatar of azzy86

ASKER

bah! using baseurl + a href + javascript = lose