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
JavaScript

Avatar of undefined
Last Comment
azzy86

8/22/2022 - Mon
stu215

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 :-)
ASKER
azzy86

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.
stu215

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>
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
stu215

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 :-)
ASKER
azzy86

A new function for each insert, ha no. The method I did find was much more simple, Id just rather not rip it off.
lil_puffball

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*
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
stu215

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
stu215

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

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 :-)
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
stu215

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 :-)
lil_puffball

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.
lil_puffball

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>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
azzy86

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?
ASKER
azzy86

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>
--
ASKER
azzy86

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 :/
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
azzy86

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
azzy86

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

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
lil_puffball

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. :)
ASKER
azzy86

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
lil_puffball

Well, I can't post anything on that page, since I don't have an account.
I do have msn:
lil_puffball @ hotmail.com
Your help has saved me hundreds of hours of internet surfing.
fblack61
stu215

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 ;-)
ASKER
azzy86

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
lil_puffball

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)}}
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
lil_puffball

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.
ASKER
azzy86

That works like a charm, thanks alot :D
ASKER
azzy86

bah! using baseurl + a href + javascript = lose
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck