adding and replacing... [Archive]

Click to See Complete Forum and Search --> : adding and replacing...

lukezweb

12-06-2003, 08:10 AM

how can i set a an image link:

<a><img src=happysmilie.gif></a>

to add:

:)

into a textarea like this one:

<textarea name=message rows=12 cols=30 wrap=soft></text>

in php?

Thanks

Pittimann

12-06-2003, 08:24 AM

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

lukezweb

12-06-2003, 08:41 AM

Originally posted by Pittimann
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

thanks and yes i knew that ;) i wil try some dOM

Pittimann

12-06-2003, 08:44 AM

Hi!

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">

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

Does this help you a bit??

Cheers - Pit

lukezweb

12-06-2003, 09:29 AM

Originally posted by Pittimann
Hi!

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">

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

Does this help you a bit??

Cheers - Pit

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

Pittimann

12-06-2003, 09:36 AM

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

lukezweb

12-06-2003, 09:39 AM

Originally posted by Pittimann
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

hi here is what im using.....

<?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('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/bold.gif' BORDER=0 ALT='Bold'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/italicize.gif' BORDER=0 ALT='Italicize'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/underline.gif' BORDER=0 ALT='Underline'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/strike.gif' BORDER=0 ALT='Strikethrough'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/glow.gif' BORDER=0 ALT='Glow'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/shadow.gif' BORDER=0 ALT='Shadow'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/move.gif' BORDER=0 ALT='Marquee'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/left.gif' BORDER=0 ALT='Align Left'></a>";
echo "<a href=javascript:add('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/center.gif' BORDER=0 ALT='Align Center'></a>";
echo "<a href=javascript:add('TEXT')>";
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('TEXT')>";
echo "<IMG SRC='http://proboards8.com/boardimages/size.gif' BORDER=0 ALT='Font Size'></a>";
echo "<a href=javascript:add('TEXT')>";
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('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/ftp.gif' BORDER=0 ALT='Insert Ftp Link'></a>";
echo "<a href=javascript:add('URL')>";
echo "<IMG SRC='http://proboards8.com/boardimages/img.gif' BORDER=0 ALT='Insert Image'></a>";
echo "<a href=javascript:add('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/email2.gif' BORDER=0 ALT='Insert Email'></a>";
echo "<a href=javascript:add('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/table.gif' BORDER=0 ALT='Insert Table'></a>";
echo "<a href=javascript:add('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/tr.gif' BORDER=0 ALT='Insert Table Column'></a>";
echo "<a href=javascript:add('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/td.gif' BORDER=0 ALT='Insert Table Row'></a>";
echo "<a href=javascript:add('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/sup.gif' BORDER=0 ALT='Superscript'></a>";
echo "<a href=javascript:add('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/sub.gif' BORDER=0 ALT='Subscript'></a>";
echo "<a href=javascript:add('')>";
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('')>";
echo "<IMG SRC='http://proboards8.com/boardimages/quote2.gif' BORDER=0 ALT='Insert Quote'></a>";
echo "<a href=javascript:add(' ')>";
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>";
?>

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

lukezweb

12-06-2003, 09:51 AM

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?

<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=="[url]"){postmsg.value=postmsg.value.replace(selection,"\LINK TEXT ("+selection+"\)")}
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>

Pittimann

12-06-2003, 10:03 AM

Hi!

In your code, you have quite a lot of:

echo "sometext"textbetween quotes"sommoretext";

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:

echo "sometext\"textbetween quotes\"sommoretext";

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