H2O: Syntax-Highlight in Textfeld -> Online-Editor

Hallo.

Gibt es eine Möglichkeit ein Textfeld zu erzeugen mit Syntax-Highlight?
Also, ein Textfeld zu erzeugen geht ja einfach mit texarea.

Wie schaffe ich es aber nun, dass wie in einem Editor auch der Syntax farblich hervorgehoben wird?
Ich denke mal, das geht mit einem Textarea-Feld nicht, wie soll ich es aber sonst machen?

Das ganze soll Online laufen, ohne Java und Flash.
Also werde ich warscheinlich JavaScript brauchen, oder?
Ich habe nur leider noch überhaupt keine Ahnung, wie sich das durchsetzen soll, bzw. ob sich das überhaupt durchseten lässt.

Gibt es sowas vielleicht sogar schon?

Was ich machen will:
Der Source-code von einer Datei wird über PHP abgefragt und dann formatiert (wie in einem Editor (Syntax-Highlight)) angezeigt.
Danach klickt man auf [Übernehmen] und schon, wird die Datei abgespeichert.

Wäre für jede Hilfe (und für jeden Denkanstoß) dankbar,
H2O

--
#*~!:     Download Opera
Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                          Decoder    -    Infos
  1. Wie schaffe ich es aber nun, dass wie in einem Editor auch der Syntax
    farblich hervorgehoben wird?

    Gar nicht.

    1. Hallo,

      Gar nicht.

      Das würde ich nicht sagen. Was spricht dagegen die Anzeigeseite dynamisch zu erzeugen, das File direkt als HTML in die Seite zu laden (als Teil der Seite), und die Sonderzeichen im Code zu kodieren, damit diese nicht als normales HTML interpretiert werden. Bei dieser Umwandlung kann man natürlich auch gewisse Tags farblich anzeigen lassen, und den Inhalt des Files kann man ja mit einem Formular als Name-Wert Paar ohne weiteres irgendwo hin schicken, abspeichern, oder was man auch immer man damit machen will.

      Markus.

      --
      sh:( fo:| ch:? rl:( br:> n4:( ie:{ mo:) va:) de:] zu:) fl:( ss:| ls:] js:|
      1. Hallo,

        Gar nicht.

        Das würde ich nicht sagen. Was spricht dagegen die Anzeigeseite dynamisch zu erzeugen, [...]

        Die Frage war, wie Syntax-Highlighting in der Text-Area gemacht werden kann und das geht nicht. Natürlich kann man den HTML-Quelltext farblich darstellen, aber nicht in der Text-Area.

        1. Hi,

          Die Frage war, wie Syntax-Highlighting in der Text-Area gemacht werden kann und das geht nicht. Natürlich kann man den HTML-Quelltext farblich darstellen, aber nicht in der Text-Area.

          Diesbezüglich hast du natürlich Recht, aber ich glaube ja doch, dass er eine Lösung für sein Hauptproblem haben will:

          Was ich machen will:
          Der Source-code von einer Datei wird über PHP abgefragt und dann formatiert (wie in einem Editor (Syntax-Highlight)) angezeigt.
          Danach klickt man auf [Übernehmen] und schon, wird die Datei abgespeichert.

          Markus.

          --
          sh:( fo:| ch:? rl:( br:> n4:( ie:{ mo:) va:) de:] zu:) fl:( ss:| ls:] js:|
          1. Hallo Markus.

            Diesbezüglich hast du natürlich Recht, aber ich glaube ja doch, dass er eine Lösung für sein Hauptproblem haben will:

            [...] dann formatiert (wie in einem Editor (Syntax-Highlight)) angezeigt.

            ^^^^^^^^^^^^^^^^^^^ Sorry, wenn ich mich etwas
                                                           schlecht ausgedrückt habe.
                                                           Es sollte auch wie in einem Editor
                                                           zu bearbeiten sein...

            Ne, mir ist schon klar, dass man mit highlight_file() sowas machen könnte, nur das Problem ist ja, dass man es noch bearbeiten muss...

            Man liest sich, H2O

            --
            #*~!:     Download Opera
            Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                                      Decoder    -    Infos
        2. Hallo Anonymous.

          Das würde ich nicht sagen. Was spricht dagegen die Anzeigeseite dynamisch zu erzeugen, [...]

          Anonymous (warum auch immer er anonym postet...) hat in gewisser Weise schon Recht...
          Ich will, dass der ausgegebene Text noch veränderbar ist.
          Trotzdem danke.

          Die Frage war, wie Syntax-Highlighting in der Text-Area gemacht werden kann und das geht nicht. Natürlich kann man den HTML-Quelltext farblich darstellen, aber nicht in der Text-Area.

          Naja, auch nicht ganz korrekt. Es muss von mir aus nicht in einer Text-Area sein, es kann auch irgendeine andere Möglichkeit sein...
          Ich hatte schon mal daran gedacht, vielleicht für jedes Wort ein eigenes Input-Feld zu erzeugen, welches dann die verschiedenen Farben bekommt, doch das wird leider viel zu umständlich...

          Man liest sich, H2O

          --
          #*~!:     Download Opera
          Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                                    Decoder    -    Infos
          1. hi,

            Ich hatte schon mal daran gedacht, vielleicht für jedes Wort ein eigenes Input-Feld zu erzeugen, welches dann die verschiedenen Farben bekommt, doch das wird leider viel zu umständlich...

            könnte auch, je nach umfang, den ein oder anderen browser in die knie zwingen.
            und für den user wär's auch wenig komfortabel, immer zum nächsten feld springen zu müssen.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo wahsaga.

              könnte auch, je nach umfang, den ein oder anderen browser in die knie zwingen.
              und für den user wär's auch wenig komfortabel, immer zum nächsten feld springen zu müssen.

              Ja, hast Recht, an das Problem der Browserauslastung habe ich gar nicht gedacht.
              Aber das mit dem Textfeld-Sprung hätte man (glaube ich) doch auch so lösen können (oder etwa nicht?).
              Man kann ja schließlich die Cursorstelle auslesen (bei modernen Browsern) also müsste man doch auch erkennen, wann man zum nächsten Textfeld springen muss.

              Man liest sich, H2O

              --
              #*~!:     Download Opera
              Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                                        Decoder    -    Infos
              1. hi,

                Aber das mit dem Textfeld-Sprung hätte man (glaube ich) doch auch so lösen können (oder etwa nicht?).
                Man kann ja schließlich die Cursorstelle auslesen (bei modernen Browsern) also müsste man doch auch erkennen, wann man zum nächsten Textfeld springen muss.

                und woher weißt du, was für ein neues wort mit wie vielen buchstaben ich an der stelle eintippen möchte, wo vorher eines mit x buchstaben stand?

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hallo wahsaga.

                  und woher weißt du, was für ein neues wort mit wie vielen buchstaben ich an der stelle eintippen möchte, wo vorher eines mit x buchstaben stand?

                  Muss ich doch gar nicht wissen *g*
                  Ich finde einfach heraus, wo die Leerzeichen stehen.

                  Man liest sich, H2O

                  --
                  #*~!:     Download Opera
                  Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                                            Decoder    -    Infos
  2. Hallo, H2O,

    Wie schaffe ich es aber nun, dass wie in einem Editor auch der Syntax farblich hervorgehoben wird? Ich denke mal, das geht mit einem Textarea-Feld nicht, wie soll ich es aber sonst machen?

    Mit einem scrollbaren div-Element vielleicht?

    Danach klickt man auf [Übernehmen] und schon, wird die Datei abgespeichert.

    Wie meinst Du denn das? Soll nur der Text abgespeichet werden? Dazu kannst Du ja die Datei mit dem Source-Code zum Download anbieten ...

    Grüße,

    Sebastian

    1. Hallo Sebastian.

      Mit einem scrollbaren div-Element vielleicht?

      Da kann man ja nur leider den Inhalt nicht verändern.
      Der Text soll auch änderbar sein.

      Wie meinst Du denn das? Soll nur der Text abgespeichet werden? Dazu kannst Du ja die Datei mit dem Source-Code zum Download anbieten ...

      Du hast einen Quelltext vor, z.B. von der Datei test.txt
      Den Quelltext kannst du nun so umändern, wie du willst und wenn du auf Übernehmen klickst, wird der Datei test.txt der neue Quelltext zugewiesen.

      Man liest sich, H2O

      --
      #*~!:     Download Opera
      Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                                Decoder    -    Infos
  3. Lieber Wassermaxe (H2O),

    das riecht verdächtig nach einer großen Aufgabe. Wenn man sich die Funktionsweise von online-WYSIWYG-HTML-Editoren wie FCKeditor, tinyMCE, Spaw o.ä. anschaut, dann könnte man dieses Prinzip für Deine Bedürfnisse "abspecken", indem nur noch der eingegebene (Quell-)Text eingefärbt werden muss. Diese Editoren verwenden ein <div> oder gar einen IFrame zur Darstellung, speichern den getippten Text aber entweder in einer <textarea> oder direkt im Dokument in einem <div>.

    Wie gesagt, sowas könnte ich mir gut vorstellen, dass die Welt noch braucht... Oder gibt's das inzwischen nicht auch schon?

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    1. Hallo Felix.

      Lieber Wassermaxe (H2O),

      Jaja...

      das riecht verdächtig nach einer großen Aufgabe. Wenn man sich die Funktionsweise von online-WYSIWYG-HTML-Editoren wie FCKeditor, tinyMCE, Spaw o.ä. anschaut, dann könnte man dieses Prinzip für Deine Bedürfnisse "abspecken", indem nur noch der eingegebene (Quell-)Text eingefärbt werden muss.

      Nunja... Als ich mir die Seiten gerade ansah ist mir zum ersten Mal der Gedanke gekommen, dass diese Editoren ja auch vielleicht im Firefox funktionieren...
      Und siehe da, die gehen wirklich im Firefox *gg* Hätte ich (Opera-Nutzer) nicht mit gerechnet, da der Opera leider nicht mitmacht... 8(

      Diese Editoren verwenden ein <div> oder gar einen IFrame zur Darstellung, speichern den getippten Text aber entweder in einer <textarea> oder direkt im Dokument in einem <div>.

      Mir war die Methode bisher nur im IE bekannt, ein div zu erstellen, welches (nur im IE) veränderbar ist...
      Schade, dass es scheinbar immer noch keine Möglichkeit für Opera gibt...
      Aber gut, dann muss ich mir das mal ansehen, hat mir echt weitergeholfen.

      Wie gesagt, sowas könnte ich mir gut vorstellen, dass die Welt noch braucht... Oder gibt's das inzwischen nicht auch schon?

      Nicht, dass ich wüsste... *gg*
      Aber ich werde mich dann wohl mal rangeben ;)

      Vielen Dank,
      H2O

      --
      #*~!:     Download Opera
      Selfcode: [ie:% fl:( br:< va:) ls:[ fo:| rl:( n4:( ss:) de:> js:| ch:? sh:( mo:| zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%25%20fl%3A(%20br%3A%3C%20va%3A)%20ls%3A%5B%20fo%3A%7C%20rl%3A(%20n4%3A(%20ss%3A)%20de%3A%3E%20js%3A%7C%20ch%3A%3F%20sh%3A(%20mo%3A%7C%20zu%3A%7D)
                                Decoder    -    Infos