adding and replacing…

@lukezwebDec 06.2003

how can i set a an image link:

to add:

into a textarea like this one:

in php?

Thanks

to post a comment

PHP

8 Comments(s) _↴

@PittimannDec 06.2003 — #Hi!

For sure, you want to enable the user to insert the smilie. So do it client side. In js it is very easy to accomplish what you want, if you are satisfied with the smilie always being inserted at the end of the text already in the textarea by some browsers.

Due to my limited experience, I only know a way, how to insert it at cursor position in IE...

BTW - guess you know, that not the image is going to be inserted into the textarea, but the image tag. The image will then be visible when you deal with the user's input.

Cheers - Pit

@lukezwebauthorDec 06.2003 — #[i]Originally posted by Pittimann [/i]

[B]Hi!

For sure, you want to enable the user to insert the smilie. So do it client side. In js it is very easy to accomplish what you want, if you are satisfied with the smilie always being inserted at the end of the text already in the textarea by some browsers.

Due to my limited experience, I only know a way, how to insert it at cursor position in IE...

BTW - guess you know, that not the image is going to be inserted into the textarea, but the image tag. The image will then be visible when you deal with the user's input.

Cheers - Pit [/B][/QUOTE]

thanks and yes i knew that ? i wil try some dOM

@PittimannDec 06.2003 — #Hi!

Here the short version of code, always adding the tag at the end of the text in the textarea:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 function insertSmilie(smilieName){
 document.myForm.message.value=document.myForm.message.value+'<img src="'+smilieName+'.gif">';
 document.myForm.message.focus();
 }
 //-->
 </script>
 </head>
 <body>
 <a href="javascript:insertSmilie('happysmilie')"><img src="happysmilie.gif"></a>
 <form name="myForm">
 <textarea name="message" cols="50" rows="6"></textarea>
 </body>
 </html>
 [/code]

Does this help you a bit??

Cheers - Pit

@lukezwebauthorDec 06.2003 — #[i]Originally posted by Pittimann [/i]

[B]Hi!

Here the short version of code, always adding the tag at the end of the text in the textarea:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 function insertSmilie(smilieName){
 document.myForm.message.value=document.myForm.message.value+'<img src="'+smilieName+'.gif">';
 document.myForm.message.focus();
 }
 //-->
 </script>
 </head>
 <body>
 <a href="javascript:insertSmilie('happysmilie')"><img src="happysmilie.gif"></a>
 <form name="myForm">
 <textarea name="message" cols="50" rows="6"></textarea>
 </body>
 </html>
 [/code]

Does this help you a bit??

Cheers - Pit [/B][/QUOTE]

if im right this chnages the symbols to images on submit?

@PittimannDec 06.2003 — #Hi!

On submit you will simply send the data somewhere (I don't know the action taken, when your form is submitted).

Assuming you use the stuff for - let's say - a guestbook or so, and you'll have the data stored in a database or a textfile (do you??). If so and you have the data beeing read by your (e.g.) guestbook.php and echoed them somewhere, then you will have the images...

Cheers - Pit

@lukezwebauthorDec 06.2003 — #[i]Originally posted by Pittimann [/i]

[B]Hi!

On submit you will simply send the data somewhere (I don't know the action taken, when your form is submitted).

Assuming you use the stuff for - let's say - a guestbook or so, and you'll have the data stored in a database or a textfile (do you??). If so and you have the data beeing read by your (e.g.) guestbook.php and echoed them somewhere, then you will have the images...

Cheers - Pit [/B][/QUOTE]

hi here is what im using.....

[code=php]
 <?php
 echo "<html>";
 echo "<head>";
 echo "<LINK REL='stylesheet' TYPE='text/css' HREF='style.css'>";
 echo "<title>Message Box</title>";
 ?>
 <script>
 // SMILY CODE
 // MADE BY LUKE DYSON
 // MAY NOT BE USED ANYWHERE!
 function smiley() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":)";
 }
 function annoyed() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":-/ ";
 }
 function bad() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":-[ ";
 }
 function blush() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":@ ";
 }
 function cheesy() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":D ";
 }
 function cool() {
 document.getElementsByTagName('textarea')[0].innerHTML+= "8) ";
 }
 function huh() {
 document.getElementsByTagName('textarea')[0].innerHTML+= "??? ";
 }
 function kiss() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":-) ";
 }
 function roll() {
 document.getElementsByTagName('textarea')[0].innerHTML+= "::) ";
 }
 function sad() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":( ";
 }
 function shock() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":O ";
 }
 function smart() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":Z ";
 }
 function tongue() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ":P ";
 }
 function wink() {
 document.getElementsByTagName('textarea')[0].innerHTML+= ";) ";
 }
 </script>
 
 <?php
 echo "</head>";
 echo "<body style='margin: 0pt;'>";
 echo "<center><table>";
 echo "<tr><td background='greengrad.gif'><div align=center><font class=text2>MessageBox</font></td></tr>";
 echo "<tr><td>";
 echo "<div align=center><a href=javascript:add('[b]TEXT[/b]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/bold.gif' BORDER=0 ALT='Bold'></a>";
 echo "<a href=javascript:add('[i]TEXT[/i]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/italicize.gif' BORDER=0 ALT='Italicize'></a>";
 echo "<a href=javascript:add('[u]TEXT[/u]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/underline.gif' BORDER=0 ALT='Underline'></a>";
 echo "<a href=javascript:add('[s]TEXT[/s]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/strike.gif' BORDER=0 ALT='Strikethrough'></a>";
 echo "<a href=javascript:add('[glow=red,2,300]TEXT[/glow]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/glow.gif' BORDER=0 ALT='Glow'></a>";
 echo "<a href=javascript:add('[shadow=red,left,300]TEXT[/shadow]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/shadow.gif' BORDER=0 ALT='Shadow'></a>";
 echo "<a href=javascript:add('[move]TEXT[/move]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/move.gif' BORDER=0 ALT='Marquee'></a>";
 echo "<a href=javascript:add('[left]TEXT[/left]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/left.gif' BORDER=0 ALT='Align Left'></a>";
 echo "<a href=javascript:add('[center]TEXT[/center]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/center.gif' BORDER=0 ALT='Align Center'></a>";
 echo "<a href=javascript:add('[right]TEXT[/right]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/right.gif' BORDER=0 ALT='Align Right'></a>";
 echo "<a href=javascript:add('[hr]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/hr.gif' BORDER=0 ALT='Horizontal Rule'></a>";
 echo "<a href=javascript:add('[size=2]TEXT[/size]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/size.gif' BORDER=0 ALT='Font Size'></a>";
 echo "<a href=javascript:add('[font=Verdana]TEXT[/font]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/face.gif' BORDER=0 ALT='Font Face'></a>";
 echo "</td></tr><tr><td><div align=center>";
 echo "<a href=javascript:add('')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/url.gif' BORDER=0 ALT='Insert Hyperlink'></a>";
 echo "<a href=javascript:add('[ftp][/ftp]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/ftp.gif' BORDER=0 ALT='Insert Ftp Link'></a>";
 echo "<a href=javascript:add('[img]URL[/img]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/img.gif' BORDER=0 ALT='Insert Image'></a>";
 echo "<a href=javascript:add('[email][/email]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/email2.gif' BORDER=0 ALT='Insert Email'></a>";
 echo "<a href=javascript:add('[table][tr][td][/td][/tr][/table]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/table.gif' BORDER=0 ALT='Insert Table'></a>";
 echo "<a href=javascript:add('[tr][/tr]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/tr.gif' BORDER=0 ALT='Insert Table Column'></a>";
 echo "<a href=javascript:add('[td][/td]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/td.gif' BORDER=0 ALT='Insert Table Row'></a>";
 echo "<a href=javascript:add('[sup][/sup]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/sup.gif' BORDER=0 ALT='Superscript'></a>";
 echo "<a href=javascript:add('[sub][/sub]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/sub.gif' BORDER=0 ALT='Subscript'></a>";
 echo "<a href=javascript:add('[tt][/tt]')>";
 echo "<IMG SRC='http://proboards8.com/boardimages/tele.gif' BORDER=0 ALT='Teletype'></a>";
 echo "<a href=javascript:add('

')>";

echo "<IMG SRC='http://proboards8.com/boardimages/code.gif' BORDER=0 ALT='Insert Code'></a>";

echo "<a href=javascript:add('[/quote]')>";

echo "<IMG SRC='http://proboards8.com/boardimages/quote2.gif' BORDER=0 ALT='Insert Quote'></a>";

echo "<a href=javascript:add('[list]

[*]

[/list]')>";

echo "<IMG SRC='http://proboards8.com/boardimages/list.gif' BORDER=0 ALT='Insert List'></a>";

echo "</td></tr><tr><td><div align=center><font class=text1>Smilies: </font><a onMouseDown='annoyed()'><img src=annoyed.gif></a>";

echo "<a onMouseDown='bad()'><img src=bad.gif></a>";

echo "<a onMouseDown='blush()'><img src=blush.gif></a>";

echo "<a onMouseDown='cheesy()'><img src=cheesy.gif></a>";

echo "<a onMouseDown='cool()'><img src=cool.gif></a>";

echo "<a onMouseDown='huh()'><img src=huh.gif></a>";

echo "<a onMouseDown='kiss()'><img src=kiss.gif></a>";

echo "<a onMouseDown='roll()'><img src=rolleyes.gif></a>";

echo "<a onMouseDown='sad()'><img src=sad.gif></a>";

echo "<a onMouseDown='shock()'><img src=shocked.gif></a>";

echo "<a onMouseDown='smart()'><img src=smartass.gif></a>";

echo "<a onMouseDown='smiley()'><img src=smiley.gif></a>";

echo "<a onMouseDown='tongue()'><img src=tongue.gif></a>";

echo "<a onMouseDown='wink()'><img src=wink.gif></a>";

echo "</td></tr><tr><td><div align=center><textarea name=message rows=12 cols=30 wrap=soft></text></td></tr>";

echo "<tr><td><div align=center><input type=submit value=Shout><input type=reset value=Reset></td></tr>";

echo "<tr><td><div align=center><a href=archive>Archive</a> <a href=help>Help</a></td></tr>";

echo "<tr><td><div align=center><a href=http://lukezweb.tk>MessageBox Hosted By";

echo "<BR>Lukezweb</a></td></tr></table>";

echo "</center>";

echo "</body></html>";

?>

[/code]

i have not yet added the php/mysql part yet but im working on the database stuff could you make your above part so it only has the on mousedown of submit then it replaces all the text it recognises as a smilie to an <img src ...

?? that possible

Thanks for you help ?

@lukezwebauthorDec 06.2003 — #i actually have changed it.....

http://lukezweb.jetdownloads.co.uk/php/messagebox/index.php

is where im working ?

also can i get something like this to work with it.....

its written for proboards but i was wondering if i could get it to work wiht this?

[code=php]
 <script>
 function add(text){
 if(text.match(/[/i)&&(document.selection.createRange().text||window.getSelection())){
 var begin=text.split(/]/i)[0]+"]"
 var end=begin.replace(/[/i,"[/")
 var selection=(document.selection)?document.selection.createRange().text:window.getSelection()
 postmsg=document.postmodify.message
 if(begin==""){postmsg.value=postmsg.value.replace(selection,"[url="+selection+"]LINK TEXT")}
 else{postmsg.value=postmsg.value.replace(selection,begin+selection+end)}
 }
 else{ // this part is the Proboards code, not mine
 if (document.postmodify.message.createTextRange && document.postmodify.message.caretPos) {
 var caretPos = document.postmodify.message.caretPos;
 caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
 text + ' ' : text;
 }
 else {
 document.postmodify.message.value += text;
 }
 document.postmodify.message.focus(caretPos)
 }
 }
 </script> 
 [/code]

@PittimannDec 06.2003 — #Hi!

In your code, you have quite a lot of:

[code=php]
 echo "sometext"textbetween quotes"sommoretext";
 [/code]

That will destroy everything! If you are in need of double quotes inside a double quoted echo, you have to escape them with a backslash:

[code=php]
 echo "sometext"textbetween quotes"sommoretext";
 [/code]

You see the difference in the colors?

The other thing: when your form is submitted, it will go to some PHP file - ok, you said, you didn't do that yet.

When you do it - 1 example:

"??? " should be the huh-smilie which is:

<img src="images/smilies/huh.gif" border="0" alt="">

Just use str_replace for changing the input "??? " to the desired tag before you have it written to your database or (which I consider better) have "??? " written to the database and do the str_replace when reading the data from the base (you would then easier have the chance to deal with some smilies on/ off function)...

Just read your latest post. Be aware that the "createRange" stuff is IE specific. That's what I meant when talking about inserting the stuff at cursor position...

Cheers - Pit

Also in #PHP _↴

Help me... my PHP5 code does not work properly. It doesn't check empty field at all..Help building a class form prob. with '#' character

Success!

Help @lukezweb spread the word by sharing this article on Twitter...

Tweet This

adding and replacing…

8 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

adding and replacing…

8 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #PHP _↴