Jim Knopf: Textformatierung v. Teilen einer Textarea via JavaScript

Hallo mitsammen!

Problematik:
In einem mehrzeiligen Textfeld möchte ich Textteile per Mausklick formatieren können.

Beispiel:
Man schreibt Text und möchte nun ein bestimmtest Wort kursiv darstellen. Jedesmal <i>irgendwas</i> zu schreiben überfordert speziell EDV-Seltenlinge. Mein Wunsch wäre nun, daß man entweder an der Cursorposition per Buttonklick beliebige Tags einfügen kann oder noch schöner: Einen Text markieren, dann klick und die Tags werden vor und hinter dem markierten Text eingefügt.

Hab ziemlich lange gesucht, aber offenbar heute kein Glück mit den richtigen Suchbegriffen.
Vielen Dank im vorhinein!

Jim Knopf

  1. Hi,

    In einem mehrzeiligen Textfeld möchte ich Textteile per Mausklick formatieren können.

    wie würdest Du es _ohne_ JavaScript, also nur mittels HTML und CSS lösen? Erst wenn Du das geschafft hast, kannst Du darüber nachdenken, dies mit JavaScript zu erzeugen.

    Hab ziemlich lange gesucht, aber offenbar heute kein Glück mit den richtigen Suchbegriffen.

    Such beim W3C in der DTD für HTML/4 nach dem Content-Modell des <textarea>-Elements.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi Cheatah,

      hört sich so an, als ob das riesig einfach wäre und ich zu doof, was mich nicht wundern würde, da ich nicht ständig in html unterwegs bin. Aber lediglich mit html/css? Einen bestehenden, geschriebenen Text in einer Textarea mit einem Button von außen her nachträglich formatieren <i>ohne</i> Javascript? Hmm.. kannst Du mir vielleicht einen etwas konkreteren Tip geben?

      Danke, Jim Knopf

  2. Hallo ich kenne die problematik,

    ich hab dir mal schnell was geschriebn. Was ich jetzt geschrieben habe setzt beim Knopfdruck vor und hinter den Markierten bereich die entsprechenden Tags.
    Ein großer nachteil an diesem Script ist nur wenn die Textpasage doppelt oder noch öfter vorkommt dann wird auch überall dort ein tag davor bzw dahinter gesetzt. Wenn man also ein "a" markiert werden z.b. alle a`s kursiv geschrieben.

    Aber probier es mal aus.

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

    <html>
    <head>

    <script type="text/javascript">
    <!--
     function kursiv_darstellen()
     {
      var i;
      var markierung = document.selection.createRange().text;
      var text = document.formular.textfeld.value;

    if (text.length > 0)
       {
       if (markierung.length > 0)
        {
        for (i=0; i< text.length; i++)
          {
          if (text.substring(i,i+markierung.length) == markierung)
            {
            text_anfang = text.substr(0,i);
            text_ende = text.substr(i+markierung.length,text.length);
            document.formular.textfeld.value = text_anfang + "<i>" + markierung + "</i>" + text_ende;
            i = i + markierung.length + 5;
            text = document.formular.textfeld.value;
            }
          }
        }
        else alert('Nichts Markiert');
       }
       else alert('Kein Inhalt im Textfeld');
     }
     // --->
    </script>

    </head>
    <body>

    <form action="" method="" target="" name="formular">
     <textarea name="textfeld" cols="30" rows="5"></textarea>
     <input type="Button" name="kursiv" value="kursiv" onClick="kursiv_darstellen()">
    </form>

    </body>
    </html>

    1. Hi Marcel!

      Danke für Deine Mühe, das find ich wirklich ur-nett!

      Es ist für ein Forum und da möchte ich es auch Leuten einfach machen, die mit EDV nicht so viel am Hut haben.

      Du hast mir sehr geholfen damit!

      Lieben Gruß
      Jim Knopf

    2. Hallo Erde,

      Ein großer nachteil an diesem Script ist nur wenn die Textpasage doppelt oder noch öfter vorkommt dann wird auch überall dort ein tag davor bzw dahinter gesetzt. Wenn man also ein "a" markiert werden z.b. alle a`s kursiv geschrieben.

      Das läßt sich umgehen, indem man den markierten Bereich direkt anspricht:

      <html>
      <head>

      <script type="text/javascript">
      <!--
       function kursiv_darstellen()
       {

      var range = document.selection.createRange();
             if(range.text)
               range.text = '<i>' + range.text + '</i>';

      else alert('Nichts Markiert');

      }
       // --->
      </script>

      </head>
      <body>

      <form action="" method="" target="" name="formular">
       <textarea name="textfeld" cols="30" rows="5"></textarea>
       <input type="Button" name="kursiv" value="kursiv" onClick="kursiv_darstellen()">
      </form>

      </body>
      </html>

      Das ist allerdings IE only. Zwar hat auch Mozilla spezielle Möglichkeiten, markierte Bereiche zu manipulieren, nur leider funktionieren die nicht in einer Textarea.

      Grüße, Stefan