Icons per Mausklick einfügen

[Nikic_]

Hallo,

ich hab da mal ein Problem:

ich bin nun schon durch soviele Foren und Gästebücher gewandert und überall sehe ich Smileys, die sich per Mausklick an eine Stelle im Text setzen lassen.
Leider ist meine Ahnung n icht sehr gross was JavaScript betrifft und somit hoffe ich, dass mir eine/r von euch vielleicht einen Link zu nem Tutorial geben könnte, oder mir vielleicht netterweise erklärt, wie man sowas hinbekommt.

Danke schonmal im Voraus
Gruß
Nicole

 

[Xaicon]

ich hab mal einen kleinen script gemacht:

<script>
function SetEm_o(emo){document.GB_o.msg.value+=''+emo;document.GB_o.msg.focus();}
</script>

<FORM NAME="GB_o" ACTION="./" METHOD="POST">

<A HREF="javascript:SetEm_o('tescht')">TEST</A>

<TEXTAREA name="msg" wrap="VIRTUAL" cols="34" rows="7" class="GB_input"></TEXTAREA>
</FORM>

<FORM NAME="GB_o" ACTION="./" METHOD="POST">
diese Tag kann direkt hinter dem body tag stehen. wichtig ist das der FORM Tag den/die Links (welche etwas in die textarea enfügen soll) und die Textarea einschliesst.

<A HREF="javascript:SetEm_o('tescht')">TEST</A> bedeutet:
wenn man auf den link TEST klickt wird tescht in die TEXTAREA geschreiben.

<TEXTAREA name="msg" wrap="VIRTUAL" cols="34" rows="7" class="GB_input">
ruft eine Textarea auf.

so ich hoff mal das hilft Dir.
Bei eventuellen Fragen, Fehlern, Kommentare , Kritik oder dummen Sprüchen einfach eine PN an mich

 

[Daxi]

Die Funktion, die du meinst ist ganz einfach.
Alle Smiles haben einen Code zugewiesen.
Dieser ist zusammen mit der Icon-Dateiangabe in einer Datenbank gespeichert.
Per JavaScript wirdd dieser Code in die Textarea beim Posten hinzugefügt.
Nach dem Absenden ersetzt PHP mit $text = str_replace ([Smilie-Code], [Smile-Imagetag], $text);

Ein kleines Beispiel:

HTML-Seite des Formulars:

<form action="posten.php" method=POST>
<textarea cols=30 rows=20 name="text"></textarea>
<a href="javascript:addsmile(';-)');"><img src="biggrin.gif" border=0></a>
</form>

Das eine Smilie wird rechts neben der Textarea angezeigt und soll nur ein Beispiel sein. Der Smilie-Code wird der Funktion addsmile als Parameter übergeben.
Das dazugehörige JavaScript:

<script language="JavaScript">
function addsmile(code)
{
 document.forms[0].text.value += " "+code+" ";
}
</script>

Wenn du jetzt auf das Smilie klickst, wir der Code ;-) an den Text in der Textarea angehängt. Zum schöneren Aussehen wird links und rechts neben dem Icon ein Leerzeichen eingefügt. So enden/beginnt der Text nicht direkt am Icon.

Nun zum PHP-Script:
Zwecks einfachheit nehme ich hier ein verschachteltes Array.

<?php
$smiles = Array(
 Array(";-)", "biggrin.gif"),
 Array(":-( ", "redface.gif")
 );

for($i=0;$i<count($smiles);$i++)
{
 $text = str_replace($smiles[$i][0], "<img src='".$imagedir.$smile[$i][1]."' border=0 alt=''>", $text);
}
?>

In der Variable $text wurden nun alle Smilie-Codes durch die nötigen Image-Tags ersetzt.

Eigentlich betrifft das mehr den PHP-bereich als den JavaScript-Bereich.

Ich hoffe, dass dir das hilft.
Es ist natürlich möglich, diesen Code auf jede Serverseitige Programmiersprache / Scriptsprache umzuschreiben (z.B. CGI/Perl).
Rein JavaScript würde ich nicht machen. Hat keinen wirklichen taug damit zu arbeiten.

edit:
War wol einer etwas schneller mit dem Schreiben.

 

[Nikic_]

Huhu,

danke für eure Antworten.
@Daxi
Dein Script gefällt mir, weil ich es besser verstehe. Aber trotzdem habe ich noch eine Frage: wie mache ich das Ganze, wenn ich kein verschachteltes Array, sondern eine Textarea habe? Achja, und warum steht bei "document.forms[0].text.value += " "+code+" ";" ein + hinter dem value?

Danke Gruß
Nicole

 

[Daxi]

Die verschachtelte Array soll die Icons beinhalten.
Leider habe ich da einen Fehler drin.
Werde ich editieren.

Die Array ist so aufgebaut, dass sie 2 Ebenen hat.
D.h.: Es ist ein Array, das statt Strings wiederrum ein Array enthält. Daher kommt danach die Struktur $smiles[$i][0] (Code des Smilies) und $smiles[$i][1] /Enthält die Smilie-Datei (GIF etc.)
Der Fehler ist jetzt korrigiert (War ein Anzeigefehler von Forum, der die Codes des Smilies gleich in den img-Tag umbewandelt hat.)

Achja, und warum steht bei "document.forms[0].text.value += " "+code+" ";" ein + hinter dem value?
Du meinst das += es bewirkt das gleiche wie diese Schreibweise:
x = x + "..." (klar?!)
Es hängt den Smilie-Code an den eingegebenen Text an. Dazu werden links und rechts neben dem Smilie-Code ein Leerzeichen eingfefügt.

Aber trotzdem habe ich noch eine Frage: wie mache ich das Ganze, wenn ich kein verschachteltes Array, sondern eine Textarea habe?
Du hast zur Eingabe ein Textarea nur die Smilies sind in einer Array definiert. Sie werden dort ausgelesen, dass das Script weiß, welcher Code zu welcher Datei gehört.

 

[Nikic_]

@Daxi,

ich habe, glaube ich, die Frage falsch gestellt:
Meine Smileys werden in einer Tabelle ausgegeben.
Also: Nach langem Testen bekomme ich die Smileys nun in der Textarea angezeigt wenn ich sie anklicken, aber nun werden die Einträge nicht mehr in der Db gespeichert sondern es kommt olgende Fehlermeldung:

"Fatal error: Call to undefined function: replace() in /home/www/web39/html/nicki/gbook_db/eintragen.php on line 161"

Habe das GB mal als Anhang hier dran gepostet. Sollten noch Dateien fehlen, pinnt mich einfach an.

Danke
Gruß
Nicole

 

[Daxi]

Das Problem wurde mit Instant Messenger gelöst.
Lag an replace.
replace gibts bei PHP nicht. muss str_replace sein.
Dann war da der Replace-Code für die Smileys falsch.

Funktioniert jetzt alles.