Georg Bremer: per Button in Formularfeld Smilies einfügen

Hi!

Die Überschrift ist nicht ganz präzise. "Button" mein hier nicht zwingend einen Formualerbutton.
Dann sollen "selbstgebaute" Tags rein, die nachher von einem PHP-Script interpretiert werden, zu anderem frage ich mich, ob es möglich ist, diese nicht nur einfach in vorhanden Text an der Curserposition einzusetzen, sondern ob man es hinbekommen kann, eine markierten Bereich in Tags zu klammern: ein aufschließendes Tag an den Anfang und ein abschließendes ans Ende.

Ich frage lieber einmal an, ob sich jemand damit schon versucht hat, bevor ich mir für nichts den Schädel zermartere.
Das einfache Einfügen an der Curserposition steht ersteinmal an... ist das kompliziert oder recht simpel?

danke

  1. Hallo Georg,

    Ich frage lieber einmal an, ob sich jemand damit schon versucht hat, bevor ich mir für nichts den Schädel zermartere.
    Das einfache Einfügen an der Curserposition steht ersteinmal an... ist das kompliziert oder recht simpel?

    danke

    In einem JS-Bereich im HEAD oder extern eintragen:

    function Smiley2Textfeld(s)
    {
      // Smileys in das Textfeld schreiben
      document.kontakt.eintrag.value+=s;
      document.kontakt.eintrag.focus();
    }

    Im HTML-Code das TEXTAREA-Feld einbauen

    <form action="..." method="..." name="kontakt">
      <textarea cols="..." rows="..." name="eintrag"></textarea>
    </form>

    und Smiley-Links dieser Art einfuegen:

    <a href="javascript:Smiley2Textfeld(' :-) ')"><img src="smileys/bildname.gif" border="0" alt="" title="Smiley durch Klick einfügen"></a>

    Beim Anklicken steht das Smiley im Textfeld. Im PHP-Script wird das wieder umgekehrt, d. h. :-) durch die Grafik ersetzt:

    $eintrag=str_replace(":-)","<img src="smileys/bildname.gif" border="0" alt="">",$eintrag);

    ... (diese Zeile ggf. mehrfach anwenden) und dann $eintrag ausgeben.

    MfG, Thomas

  2. Moin!

    Ich frage lieber einmal an, ob sich jemand damit schon versucht hat, bevor ich mir für nichts den Schädel zermartere.
    Das einfache Einfügen an der Curserposition steht ersteinmal an... ist das kompliziert oder recht simpel?

    Es geht mit Javascript garnicht, weil Javascript keine Informationen über die Cursorposition in der Textarea hat. Du kannst also lediglich den Text der Textarea durch Anhängen von neuem Text verändern, aber nichts tun, was einem Editor gleichkommt. Ebenso verhält es sich mit selektiertem Text - auch daran kommst du mit Javascript nicht.

    Es gibt zwar für den IE ein ActiveX-Control, welches Editorfunktionen hat, aber da ich vermute, daß es dir nicht um die Fähigkeit geht, ein Content Management System im Browser einzubauen, sondern irgendwie ein Forum mit einem Eingabefeld zu versorgen, rate ich von diesem Control ab. Dir bleiben nur die üblichen Möglichkeiten von HTML und Javascript, und die sind eben (auch in anderen Browsern als dem IE) gering.

    - Sven Rautenberg

    1. Hi!

      auch daran kommst du mit Javascript nicht.

      Schade, das dachte ich mir.

      Es gibt zwar für den IE ein ActiveX-Control

      Genaugenommen wird es ein Frontend für eine mySQL-Datenbank und wird nur vom Website-Betreiber (oder mir) benutzt, daher könnte ActiveX schon in Frage kommen - allerdings hab ich mich damit noch nie beschäftigt. Mal schauen.

      vielen Dank

      1. Hallo Georg,

        Genaugenommen wird es ein Frontend für eine mySQL-Datenbank und wird nur vom Website-Betreiber (oder mir) benutzt, daher könnte ActiveX schon in Frage kommen - allerdings hab ich mich damit noch nie beschäftigt. Mal schauen.

        Zu meiner ersten Antwort: Ich hatte das eher so verstanden: http://www.datenverdrahten.de/gb/gbtest.php. Die grafischen Smileys werden im Textfeld zu Textsmileys und so in der DB gespeichert und dann wie gezeigt im Output wieder zur Grafik gewandelt.

        Es ist ein Unterrichtsbeispiel und kein offizielles Gaestebuch - der Link ist auch nicht von Dauer.

        MfG, Thomas

        1. Hi!

          Zu meiner ersten Antwort:

          Hab schon verstanden :-). Ich werde es wohl auch so machen, bevor ich mir ActiveX "antue". Ich wollte es nur besonders elegant, um Eindruck zu schinden ;-).

          gruß

  3. Hallo Georg,

    Das einfache Einfügen an der Curserposition steht ersteinmal an... ist das kompliziert oder recht simpel?

    So kompliziert ist das nicht, es geht aber leider nur im IE:

    ---------------------------

    <html>
    <head>

    <script language="JavaScript">

    function go(){

    if(document.selection){
      var sel=document.selection.createRange();
      if(sel.parentElement()==document.all.eingabe&&sel.text!='')
       sel.text='<tag>'+sel.text+'</tag>';
    }}

    </script>
    </head>
    <body>

    <textarea name=eingabe cols=50 rows=5></textarea>
    <br><br>
    Text eingeben, einen Teil markieren, dann Button klicken
    <br><br>
    <button onclick='go()'>Tags einfügen</button>

    </body>
    </html>

    ---------------------------

    Wissenswertes zum verwendeten TextRange-Objekt gibt es bei Microsoft:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp

    Grüße, Stefan

    1. Hi!

      Wow, Volltreffer! Vielen Dank mit Zucker oben drauf! :-)
      Vielleicht kann ich's einmal zurückzahlen.

      Da das Frontend nur von drei, vier Leuten benutzt wird, die eh Explorer installiert haben, ist es einsetzbar.

      gruß