Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Inserting into a textarea, BB code

Posted on 2004-04-02
28
Medium Priority
?
828 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:azzy86
  • 12
  • 8
  • 8
28 Comments
 
LVL 10

Expert Comment

by:stu215
ID: 10744632
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 :-)
0
 

Author Comment

by:azzy86
ID: 10744780
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.
0
 
LVL 10

Expert Comment

by:stu215
ID: 10745042
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>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:stu215
ID: 10745060
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 :-)
0
 

Author Comment

by:azzy86
ID: 10745194
A new function for each insert, ha no. The method I did find was much more simple, Id just rather not rip it off.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10745281
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*
0
 
LVL 10

Expert Comment

by:stu215
ID: 10745323
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
0
 
LVL 10

Expert Comment

by:stu215
ID: 10745338
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>
0
 
LVL 10

Expert Comment

by:stu215
ID: 10745353
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 :-)
0
 
LVL 10

Expert Comment

by:stu215
ID: 10745386
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 :-)
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10745477
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.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10745503
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>
0
 

Author Comment

by:azzy86
ID: 10746801
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?
0
 

Author Comment

by:azzy86
ID: 10747111
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>
--
0
 

Author Comment

by:azzy86
ID: 10748057
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 :/
0
 

Author Comment

by:azzy86
ID: 10748059
<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>
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10748466
Is this what you mean?

<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="button" value="End All" onclick="endAll();">
<textarea name="txt" cols="100%" rows="10" onmouseup="getpos()" onkeyup="getpos()"></textarea></form>

<script>
var pos;
//put all tags that have an end tag here
var end=new Array('b','i','u','a','img','email');
//add ALL tags here
end['b']=false;
end['i']=false;
end['u']=false;
end['a']=false;
end['img']=false;
end['email']=false;
end['*']=false;

//put all special tags here
var special=new Array('*');
  special['*']=new Array('[*]','[*]');

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

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

function doInsert(txt){
if(document.selection && pos){
  pos.text=txt;
}else{
  document.forms[0].txt.value+=txt;
}

}

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

Author Comment

by:azzy86
ID: 10748487
Man I love you, LOVE YOU! You rock and thanks alot :)
0
 

Author Comment

by:azzy86
ID: 10748603
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?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10749590
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. :)
0
 

Author Comment

by:azzy86
ID: 10749690
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
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10750176
Well, I can't post anything on that page, since I don't have an account.
I do have msn:
lil_puffball @ hotmail.com
0
 
LVL 10

Expert Comment

by:stu215
ID: 10757560
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 ;-)
0
 

Author Comment

by:azzy86
ID: 10757662
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
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10761587
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)}}
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10780169
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.
0
 

Author Comment

by:azzy86
ID: 10782038
That works like a charm, thanks alot :D
0
 

Author Comment

by:azzy86
ID: 10782264
bah! using baseurl + a href + javascript = lose
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question