Smilies in Textfeldern berreits als Bilder anzeigen

Eistee

Eistee

Erfahrenes Mitglied
Hi,
ich habe für einige meiner Scripts mal ein simples JS geschrieben, dass klickbare Smilies in eine Textbox einfügt z.B. als ":)" - eben so wie in vielen Gästebüchern oder Foren.
Denke soweit ist jedem klar was ich meine ;)
Nun habe ich in neuen vBulletins (3.XX) gesehen, dass es anscheinend auch möglich ist, die Smilies in der Textbox berreits als richtige Bilder anzuzeigen...
Da ich leider kaum Ahnung von JS habe, würde ich mich freuen, wenn mir vielleicht jemand hier erklären könnte, wie so etwas funktioniert.
Mein code sieht bisher so aus:
Code: 
function smilie(thesmilie) 
{
	document.signGuestbook.message.value += thesmilie+" ";
	document.signGuestbook.message.focus();
}
und wird so aufgerufen:
Code: 
<a href="javascript:smilie(':)')"><img src="smile.gif" border="0"></a>

Ich hoffe, ihr könnt mir ein wenig weiterhelfen.
 
Das funktioniert nicht mit <textarea>... dafür brauchst du einen IE ab Version 5.5 oder einen Gecko-Browser(Netscape7, Mozilla, Firefox etc.).
Das Ganze, was wie ein <textarea> aussieht, ist eigentlich ein <iframe>

Infos zur Technik:
Gecko's: http://www.mozilla.org/editor/midas-spec.html
IE: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnmshtml/html/createwp.asp
IE + Geckos:http://www.mozilla.org/editor/ie2midas.html


Weitere Deteils liefert dir die Suche nach "DesignMode"
 
Ich habe also eine html-datei, die ich mit Hilfe von JS "editable" mache und dann in einen iframe lade, der an der Stelle der textarea sitzt?!
Könntest du mir das vielleicht mal anhand meines Beispiels mit den smilies von oben erklären?
Ich steig da noch nicht ganz durch...
 
Beispiel

Kommandos kann man in dem editierbaren Dokument im iFrame ausführen per execCommand()
Das Kommando, um Bilder einzufügen, heisst "InsertImage"

weitere Erklärungen stehen im Quelltext.
 
Hi Sven,

in deinem Beispiel hast du in der Funktion insert_image in der letzten if-Anweisung statt
objEditor nur oEditor geschrieben. Ansonsten klasse Beispiel!

Ciao
Quaese
 
Danke für das Beispiel!
Aber wie habe kann ich nun die Daten aus dem iframe mit php verabeiten?
Muss der iframe dafür wie gewohnt in ein Formular eingebunden sein und ich kann seinen Inhalt, nach abschicken des Formulars, dann über die id als Variable ansprechen oder wie habe ich mir das vorzustellen?

Sind alle hier gelisteten Kommandos möglich?
http://www.mozilla.org/editor/midas-spec.html
 
Um den Inhalt des iFrames per Formular zu senden, musst du in das Elterndokument bspw. ein verstecktes Formularfeld einbinden, dem du vor dem Senden als value den Inhalt(innerHTML) des iFrame -Dokumentes zuweist.

Zu den Kommandos.... bin ich grad nicht auf dem Laufendem ...probiers einfach aus(vergleiche die Kommandos vorher am Besten mit den IE-Kommandos und lese die Informationen hinter allen 3 Links)
 
Hab grad mal ein wenig rumprobiert:
Code: 
<html>
<head>
<title>DesignMode</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function init()
{
	objEditor=document.getElementById('editor').contentWindow;
    objEditor.document.designMode = 'on';
    objEditor.focus();
}
window.onload=init;
//-->
</script>
</head>

<body>
<input type="submit" name="bold" value="B" onClick="javascript:objEditor.execCommand(bold, false, null)"><br>
<iframe id="editor" width="500px" height="200px">
</iframe>
</body>
</html>
So wird zwar ein iframe angezeigt in dem ich auch schreiben kann, aber ich kann denn markierten Text nicht Fett stellen.
Hab ich da was falsch verstanden? Wie muss der Code erichtig aussehen?
 
Einigermassen korrekt musst du da schon arbeiten.... die Browser sind zwar recht fehlertolerant, alles können sie aber nicht ausbügeln:-)


  1. Die Kommandos müssen im document-Objekt des iFrame ausgeführt werden, nicht im iFrame(window)-Objekt selbst
  2. Der Command-Identifier(hier:bold) gehört in Anführungszeichen

ergo:
Code: 
onClick="objEditor.document.execCommand('bold', false, null)"
 
Habs jetzt hinbekommen:
Code: 
<html>
<head>
<title>DesignMode</title>
</head>
<script language="JavaScript" type="text/JavaScript">
function init()
{
	try
	{
        document.getElementById('editor').contentWindow.document.designMode = 'on';
    }
	catch(e)
    {
        alert('Der Editor funktioniert in deinem Browser nicht');
    }
}
</script>
<body onLoad="init()">
<button onClick='document.getElementById("editor").contentWindow.document.execCommand("bold", false, null); document.getElementById("editor").contentWindow.focus();'><b>B</b></button>
<br>
<iframe id="editor" width="500px" height="200px">
</iframe>
</body>
</html>

Ich hab aber noch ein Frage zu deinem Beispiel mit den Smilies weiter oben.
Wenn ich ein Bild in den Text einfüge kann ich das durch die Anhalter an allen Ecken und Seiten ja in der Größe skalieren. Nun wäre eine solche Funktion aber ein Sicherheitsrisiko für z.B. ein Forum oder GB.
Ist es auch irgendwie möglich diese Anhaltepunkte durch einen Befehl zu unterdrücken, bzw. die Skalierfunktion allein zu verbieten?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück