Solved

Inserting into a textarea, BB code

Posted on 2004-04-02
28
813 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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 125 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now