nucci: Online Quellcode in HTML umwandeln?!

Wie erstelle ich am einfachsten ein Formular, ähnlich diesem hier im Forum, wo ich HTML-Code etc. eingeben kann und nach einem Klick auf einen Button angezeigt bekomme wie dieser Code als HTML aussehen würde?
Danke schonmal im Vorraus für die hoffentlich hilfreichen Antworten! ;)

  1. Danke schonmal im Vorraus für die hoffentlich hilfreichen Antworten! ;)

      
    <html>  
     <head></head>  
     <body>  
      <form action="" target="" method="">  
       <center>  
        <textarea style="width:500px; height:200px;" id="usrEingabe">  
         Das ist nur ein test, <br /> nur ein Test <span style='color:red'>nur ein test</span><br />  
        </textarea>  
        <input type="button" name="vorschau" value="VORSCHAU" onclick="document.getElementById('vorschau_HTML').innerHTML=document.forms[0].usrEingabe.value;" />  
        <br /><br /><br />  
        <div id="vorschau_HTML"></div>  
       </center>  
      </form>  
     </body>  
    </html>  
    
    
    1. »» Danke schonmal im Vorraus für die hoffentlich hilfreichen Antworten! ;)

      <html>
      <head></head>
      <body>
        <form action="" target="" method="">
         <center>
          <textarea style="width:500px; height:200px;" id="usrEingabe">
           Das ist nur ein test, <br /> nur ein Test <span style='color:red'>nur ein test</span><br />
          </textarea>
          <input type="button" name="vorschau" value="VORSCHAU" onclick="document.getElementById('vorschau_HTML').innerHTML=document.forms[0].usrEingabe.value;" />
          <br /><br /><br />
          <div id="vorschau_HTML"></div>
         </center>
        </form>
      </body>
      </html>

      
      >   
      
      Wow, danke für die schnelle Antwort. Jetzt merke ich gerade, dass es wohl nicht so einfach ist wie ich dachte. Das Ganze funktioniert zwar mit ganz normalem Text, aber wenn ich Javascript einbinde zeigt er das nicht an. Gibt es dafür auch so eine einfache Patentlösung oder wirds da schon schwerer?
      
      1. Hi nucci,

        Das Ganze funktioniert zwar mit ganz normalem Text, aber wenn ich Javascript einbinde zeigt er das nicht an. Gibt es dafür auch so eine einfache Patentlösung oder wirds da schon schwerer?

        was moechtest Du denn eigentlich erreichen? Soll es

        ähnlich diesem [Formular] hier im Forum

        sein, wo Du hinterher einfach HTML-Code angezeigt bekommst, wenn Du HTML-Code eingibst? Oder soll

        [ich] angezeigt bekomme wie dieser Code als HTML aussehen würde

        bedeuten, dass der HTML-Code interpretiert werden soll (HTML ist eine Sprache - in dieser Hinsicht ist obiger Satz unsinnig)?

        In beiden Faellen hat Deine Frage nichts mit dem Formular zu tun. Es geht einzig darum, wie ein entsprechendes Skript den in die Textarea eingegebenen Text verarbeitet. Und auch im Falle von Javascript wird da nichts schwerer. Aber beschreibe doch mal praezise, was mit dem eingegebenen Code passieren soll.

        Viele Gruesse,
        der Bademeister

        1. Hallo Bademeister

          was moechtest Du denn eigentlich erreichen? Soll es

          »» ähnlich diesem [Formular] hier im Forum

          sein, wo Du hinterher einfach HTML-Code angezeigt bekommst, wenn Du HTML-Code eingibst? Oder soll

          »»

          Ich hatte mich hier eher auf das Eingabeformular an sich bezogen und nicht auf die "code"-Funktion die dieses bereitstellt. Weiss nicht genau ob das hier auch geht, aber bei vielen Foren gibt es ja die Möglichkeit, neben ganz normalem Text eben auch einen Post zu verfassen, der HTML oder eben Java Script enthält und sobald man den Post abschickt, bekommt man dann das Ergebnis (also eine interpretierte Version) angezeigt. Sowas will ich halt auch, nur eben ohne Forum und Drumherum. Ich brauche einfach nur die Möglichkeit einen Codeschnippsel, der HTML und Javascript enthält in ein Formular einzugeben und beim Klick auf einen Button das interpretierte Ergebnis angezeigt zu bekommen.

          HTML funktioniert ja inzwischen, nur das JS erkennt er nicht an.
          In einem anderen Forum kam die Idee auf es könnte daran liegen, dass bei dem Code der hier als erstes gepostet wurde die Seite ja nicht nochmal neu lädt und deshalb der JavaScript Teil nicht richtig interpretiert wird.
          Um das zu umgehen wurde mir der Befehl eval() vorgeschlagen um den ScriptCode zwangsweise zu interpretieren. Aber ich will eben nicht, dass mein bereits vorhandener Code wenn ich ihn einfüge noch verändert werden muss bevor ich die Vorschau bekomme.

          Langer Beitrag, Irgendjemand eine Idee? :)

          1. Ich brauche einfach nur die Möglichkeit einen Codeschnippsel, der HTML und Javascript enthält in ein Formular einzugeben und beim Klick auf einen Button das interpretierte Ergebnis angezeigt zu bekommen.

            Was ist das interpretierte Ergebnis von Javascript-Code? Soll er ausgefuehrt werden? Und wenn ja, wie? Ich weiss, die Frage klingt bloed :-)

            Moeglichkeit 1: Das Formular wird (wie ueblich) nach Ausfuellen an den Server geschickt, und der gibt eine HTML-Ressource zurueck, in der der Code in einem entprechenden Script-Element eingebunden ist.

            Moeglichkeit 2: mit eval() den Code ohne Neuladen der Seite ausfuehren.

            Achtung: Was soll z.B. passieren, wenn der Javascript-Code

            document.write("Hallo");

            eingegeben wird? Bei Moeglichkeit 1 wird die Wirkung davon abhaengen, wo im Dokument Du den interpretierten Code einbaust, bei Moeglichkeit 2 wird das, was immer Du Dir wuenscht, nicht funktionieren.

            Vernuenftiger Javascript-Code ist (nicht immer, aber meistens) so gestaltet, dass seine Ausfuehrung von Events gesteuert ist. Wenn Javascript-Code direkt ausgefuehrt wird, ohne von Events gesteuert zu sein, dann sollte man sich genau ueberlegen, wann man ihn ausfuehren will.

            Also (wieder) meine Frage: Was _genau_ soll passieren, wenn jemand Javascript-Code in diese Textarea eingibt?

            Viele Gruesse,
            der Bademeister

            1. Aaaalso, um das ganze ein bisschen einfacher zu gestalten... ;)
              Ich habe folgenden Code (oder andere in ähnlicher Form):

              <html>  
              <head>  
              <title>testseite</title>  
              </head>  
              <body>  
              <table border="1">  
              <tr>  
              <td>  
              <SCRIPT language='JavaScript1.1' SRC="http://ad.doubleclick.net/adj/N3987.IQMedia/B3502289;sz=400x400;ord=[timestamp]?">  
              </SCRIPT>  
              <NOSCRIPT>  
              <A HREF="http://ad.doubleclick.net/jump/N3987.IQMedia/B3502289;sz=400x400;ord=[timestamp]?">  
              <IMG SRC="http://ad.doubleclick.net/ad/N3987.IQMedia/B3502289;sz=400x400;ord=[timestamp]?" BORDER=0 WIDTH=400 HEIGHT=400 ALT="Hier klicken"></A>  
              </NOSCRIPT>  
              </td>  
              <td width=400px>  
              Das ist ein spannender Text, damit die Werbung nicht alleine auf der Seite steht.  
              <br>  
              Das ist ein spannender Text, damit die Werbung nicht alleine auf der Seite steht.  
              <br>  
              Das ist ein spannender Text, damit die Werbung nicht alleine auf der Seite steht.  
              </td>  
              </tr>  
              </body>  
              </html>
              

              Wenn ich das als HTML-Datei abspeicher und aufrufe, sieht das so aus wie ich es sehen will. Diesen Schritt will ich aber umgehen und (ausschließlich für interne Zwecke) die möglichkeit haben eine Seite ausfzurufen wo ich obigen Code in ein Formularfeld eingebe, auf "Vorschau" klicke und dann sehe wie der von mir eingegebene Code als HTML-Seite aussehen würde.

              1. Wenn ich das als HTML-Datei abspeicher und aufrufe, sieht das so aus wie ich es sehen will. Diesen Schritt will ich aber umgehen und (ausschließlich für interne Zwecke) die möglichkeit haben eine Seite ausfzurufen wo ich obigen Code in ein Formularfeld eingebe, auf "Vorschau" klicke und dann sehe wie der von mir eingegebene Code als HTML-Seite aussehen würde.

                Ah so. Du willst also nicht einfach Code-Schnipsel eingeben, sondern ein komplettes[1] HTML-Dokument. Das nimmt Dir natuerlich die Moeglichkeit, das einfach innerhalb eines anderen Dokuments einzubauen, weil dieses ausgesprochen invalide wuerde.

                Die vernuenftigste Loesung hier: Frames! Deine Seite mit dem Formular schickt die Daten an ein Script, das nichts tut[2], als genau den in die Textarea eingegebenen Code[1] zurueckzugeben, und zwar in einen (I)Frame, der neben der Seite mit dem Formular sichtbar ist (Stichwort: target-Attribut des Formulars).

                Ja, es gibt Faelle, in denen Frames sinnvoll sind. Und zwar solche, in denen wirklich mehrere verschiedene Dokumente angezeigt werden sollen. Dieses ist so ein Fall.

                [1] In Deinem Beispiel fehlt die Doctype-Deklaration. Sie sollte entweder mit angegeben oder, wenn sie feststeht, bei der Ausgabe automatisch ergaenzt werden - da musst Du selber wissen, wie Du es genau haben willst.

                [2] Ggf. sollte das Skript, das die Formulardaten empfaengt, zusaetzlich die Moeglichkeit bieten, den Code gleich in einer Datei zu speichern. Sonst sehe ich denn Sinn in der ganzen Aktion nicht recht.

                Viele Gruesse,
                der Bademeister

                1. Hallo Bademeister!
                  Danke für deine ausführliche Antwort!
                  Hab jetzt mal wieder eine ganze Weile im Netz gesucht und bin nicht  viel schlauer als vorher :(
                  Hast du vllt. eine Beispiellösung für diese Framegeschichte parat?
                  mfg
                  nucci

                  1. Hi,

                    Hast du vllt. eine Beispiellösung für diese Framegeschichte parat?

                    Rezept:

                    Deine Seite beinhaltet ein http://de.selfhtml.org/html/frames/definieren.htm@title=Frameset mit zwei Frames,

                    einer heisst etwa "FormFrame" und einer "DisplayFrame".

                    Im Formframe laedst Du das Dokument mit Deinem Formular und der Textarea. Das Formular kriegt die Attribute

                    action=[verarbetindes_skript] (z.b. action="receive_form.php") und
                    http://de.selfhtml.org/html/frames/verweise.htm#zu_anderen_frames@title=target="DisplayFrame" (target funktioniert fuer Formulare wie fuer Links)

                    Dann muss das verarbeitende Skript noch den Formularinhalt ausgeben und ggf. alles weitere tun, was Du gerne haettest (in Datei speichern...), und fertig ist der Lack :-)

                    Viele Gruesse,
                    der Bademeister

    2. <html>
      <head></head>
      <body>
        <form action="" target="" method="">
         <center>
          <textarea style="width:500px; height:200px;" id="usrEingabe">
           Das ist nur ein test, <br />

      Ein textarea Element darf kein <br> enthalten, noch irgend ein anderes Element.

        
      mfg Beat
      
      -- 
      
      ><o(((°>           ><o(((°>  
      
         <°)))o><                     ><o(((°>o  
      Der Valigator leibt diese Fische