Smilies in Textarea bzw. WYSIWIG - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Smilies in Textarea bzw. WYSIWIG

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Smilies in Textarea bzw. WYSIWIG

Pages: [1]

geschrieben von AlexD am 03.06.2008 - 10:19

Hallo zusammen,

ich hab in I-Net MR. Google sowie diverse Foren bezüglich Einfügen von Smilies in eine Textarea befragt, und auch was gefunden.
Bin auch hier fündig geworden.
Für eine normale Textarea hatte ich schon eine Lösung, leider 'leg' ich einen WYSIWIG-Editor drüber und schon funktioniert das nicht mehr.
Es reicht völlig aus wenn nur der Smilie-Code angezeigt wird, es muss nicht gleich das Smilie angezeigt werden das mach ich dann später mit PHP. Das Anzeigen später in der Nachricht über PHP funktioniert ja schon einwandfrei, man muss jetzt leider immer den Smilie-Code manuell eingeben, wäre halt super wenn das so klappen würde mit anklicken.

Das Ganze sieht im Moment so aus incl. die WYSIWIG:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26:

<head> 
<script language="JavaScript" type="text/javascript" src="openwysiwyg/scripts/wysiwyg.js"></script>
<script language="JavaScript" type="text/javascript" src="openwysiwyg/scripts/wysiwyg-settings.js"></script>
<script language="javascript1.2">
   WYSIWYG.attach('textarea1');

</script>
<script language="JavaScript">
function insert_smiley(smileycode)
{
document.new_msg.message.value+=smileycode;
}
</script>

</head>



// Verlinkung der Smilies
         <td width="30%"><div align="center">
             <a href="javascript:insert_smiley(';)')"><img src="./img/smilies/wink.gif" border=0></a><br>
             <a href="javascript:insert_smiley('')"><img src="./img/smilies/biggrin.gif" border=0></a></div>
         </td>

// Textarea, die ID brauch ich für den WYSIWYG
<textarea name="message" id="textarea1"> </textarea>

Nehme ich die 'id' raus, funktionieren die Smilies aber der WYSIWIG ist logischerweise weg.
Ich benutze den 'openWYSIWIG' den man auf http://www.openwebware.com kostenlos runterladen kann.

Nachstehend hab ich mal den Editor mit angehängt.....

Gruß
Alex

[Edit]
doch glatt vergessen die Datei auch mit hochzuladen..... tz tz tz
[/Edit]

geschrieben von Micha am 03.06.2008 - 11:34

Hi,

es gibt die Möglichkeit, Bilder einzufügen. Ein Smilie ist ja nichts anderes, sodass die Funktion schon existiert. Nutze die Funktion

	HTML-Quelltext
1:	insertImage: function(src, width, height, align, border, alt, hspace, vspace, n)

aus wysiwyg.js

Gruß Micha

geschrieben von AlexD am 03.06.2008 - 12:11

Ok, das ist wohl ein Argument....

JS ist ned grad meine Welt.... kann ich die Funktion genauso
aufrufen??
Sorry, wenn ich davon ned wirklich viel Ahnung hab.

insertImage: function(src, width, height, align, border, alt, hspace, vspace, n)

=> <a href="javascript:insertImage('./img/smilies/wink.gif')"><img src="./img/smilies/wink.gif" border=0></a>

so funktioniet's wohl ned...

geschrieben von Micha am 03.06.2008 - 13:19

Hi,

schau mal in das JS-File. dort steht drin, was die einzelnen Übergabeparameter bedeuten und welchen Wert sie zB annehmen können. Nur die Bildquelle reicht nicht, es fehlen die anderen acht Argumente.

Micha

geschrieben von AlexD am 03.06.2008 - 16:21

Hallo Micha,

jep sollte man schon alles übergeben.

Aber irgendwie funktioniert's trotzdem ned:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21:

Smily zum anklicken:
<a href="javascript:insertImage('./img/smilies/wink.gif', '15', '15', 'left', 'none', 'zwinker', '0', '0', 'textarea1')"><img src="./img/smilies/wink.gif" border=0></a>

die Textarea
<textarea name="message" id="textarea1"> </textarea>


die Parameter von wysiwig
	 * Insert or modify an image
	 * 
	 * @param {String} src Source of the image
	 * @param {Integer} width Width
	 * @param {Integer} height Height
	 * @param {String} align Alignment of the image
	 * @param {String} border Border size
	 * @param {String} alt Alternativ Text
	 * @param {Integer} hspace Horizontal Space
	 * @param {Integer} vspace Vertical Space
	 * @param {String} n The editor identifier (the textarea's ID)
	 */
	insertImage: function(src, width, height, align, border, alt, hspace, vspace, n) { ........

geschrieben von Micha am 03.06.2008 - 19:07

Hi,

meine Schuld! Die Methode gehört dem Objekt WYSIWYG und scheint static zu sein. Wie dem auch sein, so gehts:

	HTML-Quelltext
1:	<a href="javascript:WYSIWYG.insertImage('./img/smilies/wink.gif', '15', '15', 'left', 'none', 'zwinker', '0', '0', 'textarea1')">

Gruß Micha

geschrieben von AlexD am 03.06.2008 - 21:51

Hi Micha,

ja so funktioniert das Ganze.

Nein, ned nur der Smilie-Code wird angezeigt, nein sogar der Smile.... das Ergebnis ist besser als ich mir das vorgestellt habe.

Nur wenn man mehrere Smilies hintereinander einfügen möchte wirds bissle komplizierter, man muss dann immer erst in den Editor klicken bevor man wieder einen einfügen kann, der IE macht die ganzen Smilies dann sogar ganz oben links.
Aber mit dem kann ich leicht leben, so ist das Ergebnis echt super geworden!!

Vielen lieben Dank nochmal für die Mühe und die Zeit!!!

Gruß
Alex

geschrieben von Micha am 04.06.2008 - 09:44

Hi,

ja, das kann schon sein. Das Problem wirst Du vermutlich nicht lösen, da Du im eigentlichen Sinne in einem Fram schreibst und nicht in der Textarea. Darum wird es vermutlich schwer, den Focus erneut zu setzen. Das beschriebene Problem müsstest DU auch haben, wenn Du mehrere Bilder einfügst. Ich denke wie gesagt nicht, dass Du hier eine (einfache) Lösung finden wirst.

Gruß Micha

geschrieben von AlexD am 04.06.2008 - 21:40

Naja, ein kleiner Schönheitsfehler, ned mehr und ned weniger.

Ich kann damit sehr gut leben! Wie oben schon geschrieben bin ich begeistert und mit dem Ergebnis immer noch mehr als zufrieden!

Danke nochmal... das Forum hier ist wirklich klasse!!!