Seite bearbeiten mit Javascript Editor

Diesen Editor hat unser User Valentin Hammer eingeschickt.

Obwohl es da draussen unzählige Editoren gibt, die ähnlich funktionieren und evtl. die Anzeige etwas komfortabler aussehen lassen, hat dieser Javascript-Editor meiner Meinung nach zwei ganz große Vorteile:

1. Er ist ideal zum HTML lernen. Bei Klick auf einen Button werden die wichtigen Parameter abgefragt, und anschließend wird der fertig generierte HTML-Code angezeigt. Mit dem Klick auf „Änderungen übernehmen“ wird der HTML Code so angezeigt, wie er auf der Homepage dann erscheinen würde.

2. Man erkennt (wie z. B. im Editor im Forum, welche HTML-Tags noch offen sind und noch geschlossen werden müssen.

Probiert es mal aus.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- /* © Valentin Hammer Originalversion auf http://www.meinewebseite.net/supermari0 */ var Zeile_x = ""; var Zeile_y = ""; var Text_fett_x = 0; var Text_fett_y = 0; var Text_kursiv_x = 0; var Text_kursiv_y = 0; var Text_unterstrichen_x = 0; var Text_unterstrichen_y = 0; var Schrift_x = 0; var Schrift_y = 0; var Hyperlink_x = 0; var Hyperlink_y = 0; var E_Mail_x = 0; var E_Mail_y = 0; var Laufschrift_x = 0; var Laufschrift_y = 0; function Seite_editieren() { var HTML = document.getElementById('HTML_der_Seite').value; if(HTML == "") HTML = " "; document.getElementById('editierbare_Seite').innerHTML = HTML; } function Zeile() { { if((Zeile_x == 0) && (Zeile_y == 0)) Zeile_offen(); if((Zeile_x == 1) && (Zeile_y == 0)) Zeile_geschlossen(); } Zeile_y = 0; } function Zeile_offen() { var Ausrichtung = ""; Ausrichtung = prompt("Textausrichtung links: left, mitte: center, rechts: rightnKeine Eingabe = normale Textposition",""); var Text1_Zeile = ' align="'+Ausrichtung+'"'; if(Ausrichtung == "") Text1_Zeile = ""; if(Ausrichtung == null) Text1_Zeile = ""; var Tag_Zeile = "<p"+Text1_Zeile+">"; document.getElementById('HTML_der_Seite').value += Tag_Zeile; document.getElementById('Zeile').value = "... Zeile *"; Zeile_x = 1; Zeile_y = 1; } function Zeile_geschlossen() { document.getElementById('HTML_der_Seite').value += "</p>"; document.getElementById('Zeile').value = "Zeile ..."; Zeile_x = 0; Zeile_y = 1; } function Text_fett() { { if((Text_fett_x == 0) && (Text_fett_y == 0)) Text_fett_offen(); if((Text_fett_x == 1) && (Text_fett_y == 0)) Text_fett_geschlossen(); } Text_fett_y = 0; } function Text_fett_offen() { document.getElementById('HTML_der_Seite').value += "<b>"; document.getElementById('b').value = "b *"; Text_fett_x = 1; Text_fett_y = 1; } function Text_fett_geschlossen() { document.getElementById('HTML_der_Seite').value += "</b>"; document.getElementById('b').value = "b"; Text_fett_x = 0; Text_fett_y = 1; } function Text_kursiv() { { if((Text_kursiv_x == 0) && (Text_kursiv_y == 0)) Text_kursiv_offen(); if((Text_kursiv_x == 1) && (Text_kursiv_y == 0)) Text_kursiv_geschlossen(); } Text_kursiv_y = 0; } function Text_kursiv_offen() { document.getElementById('HTML_der_Seite').value += "<i>"; document.getElementById('k').value = "k *"; Text_kursiv_x = 1; Text_kursiv_y = 1; } function Text_kursiv_geschlossen() { document.getElementById('HTML_der_Seite').value += "</i>"; document.getElementById('k').value = "k"; Text_kursiv_x = 0; Text_kursiv_y = 1; } function Text_unterstrichen() { { if((Text_unterstrichen_x == 0) && (Text_unterstrichen_y == 0)) Text_unterstrichen_offen(); if((Text_unterstrichen_x == 1) && (Text_unterstrichen_y == 0)) Text_unterstrichen_geschlossen(); } Text_unterstrichen_y = 0; } function Text_unterstrichen_offen() { document.getElementById('HTML_der_Seite').value += "<u>"; document.getElementById('u').value = "u *"; Text_unterstrichen_x = 1; Text_unterstrichen_y = 1; } function Text_unterstrichen_geschlossen() { document.getElementById('HTML_der_Seite').value += "</u>"; document.getElementById('u').value = "u"; Text_unterstrichen_x = 0; Text_unterstrichen_y = 1; } function Schrift() { { if((Schrift_x == 0) && (Schrift_y == 0)) Schrift_offen(); if((Schrift_x == 1) && (Schrift_y == 0)) Schrift_geschlossen(); } Schrift_y = 0; } function Schrift_offen() { var Schrift = ""; var Groesse = ""; var Farbe = ""; Schrift = prompt("Schriftart (z.B.: Arial, Times new Roman, Comic Sans MS)nKeine Eingabe = keine Schriftart",""); Groesse = prompt("SchriftgrößenKeine Eingabe = Standardgröße",""); Farbe = prompt("Schriftfarbe (z.B.: red, orange, yellow, green, blue, black)nKeine Eingabe = Standardschriftfarbe",""); var Text1_Schrift = ' face="'+Schrift+'"'; var Text2_Schrift = ' size="'+Groesse+'"'; var Text3_Schrift = ' color="'+Farbe+'"'; if(Schrift == "") Text1_Schrift = ""; if(Schrift == null) Text1_Schrift = ""; if(Groesse == "") Text2_Schrift = ""; if(Groesse == null) Text2_Schrift = ""; if(Farbe == "") Text3_Schrift = ""; if(Farbe == null) Text3_Schrift = ""; var Tag_Schrift = "<font"+Text1_Schrift+Text2_Schrift+Text3_Schrift+">"; document.getElementById('HTML_der_Seite').value += Tag_Schrift; document.getElementById('Schrift').value = "... Schrift *"; Schrift_x = 1; Schrift_y = 1; } function Schrift_geschlossen() { document.getElementById('HTML_der_Seite').value += "</font>"; document.getElementById('Schrift').value = "Schrift ..."; Schrift_x = 0; Schrift_y = 1; } function Zeilenumbruch() { document.getElementById('HTML_der_Seite').value += "<br />"; } function Hyperlink() { { if((Hyperlink_x == 0) && (Hyperlink_y == 0)) Hyperlink_offen(); if((Hyperlink_x == 1) && (Hyperlink_y == 0)) Hyperlink_geschlossen(); } Hyperlink_y = 0; } function Hyperlink_offen() { var Hyperlink = ""; Fenster = ""; Hyperlink = prompt("Gib die Adresse ein","http://"); { Fenster = confirm("Soll die Seite in einem neuen Fenster geöffnet werden?"); if(Fenster==true) Fenster = 'blank_'; if(Fenster==false) Fenster = ''; } var Text1_Hyperlink = ' target="'+Fenster+'"'; var Text2_Hyperlink = ' href="'+Hyperlink+'"'; if(Fenster == "") Text1_Hyperlink = ""; if(Fenster == null) Text1_Hyperlink = ""; if(Hyperlink == "") Text2_Hyperlink = ""; if(Hyperlink == null) Text2_Hyperlink = ""; var Tag_Hyperlink = "<a"+Text1_Hyperlink+Text2_Hyperlink+">"; document.getElementById('HTML_der_Seite').value += Tag_Hyperlink; document.getElementById('Hyperlink').value = "... Hyperlink *"; Hyperlink_x = 1; Hyperlink_y = 1; } function Hyperlink_geschlossen() { document.getElementById('HTML_der_Seite').value += "</a>"; document.getElementById('Hyperlink').value = "Hyperlink ..."; Hyperlink_x = 0; Hyperlink_y = 1; } function Bild() { var Bild = ""; var Bildtext = ""; var Bild_Breite = ""; var Bild_Hoehe = ""; Bild = prompt("Gib den URL des Bildes ein","http://"); Bildtext = prompt("BildtextnKeine Eingabe = kein Bildtext",""); Bild_Breite = prompt("Breite des BildesnKeine Eingabe = Breite aus URL holen",""); Bild_Hoehe = prompt("Höhe des Bildesn Keine Eingabe = Höhe aus URL holen",""); var Text1_Bild = ' src="'+Bild+'"'; var Text2_Bild = ' alt="'+Bildtext+'"'; var Text3_Bild = ' width="'+Bild_Breite+'"'; var Text4_Bild = ' height="'+Bild_Hoehe+'"'; if(Bild == "") Text1_Bild = ""; if(Bild == null) Text1_Bild = ""; if(Bildtext == "") Text2_Bild = ""; if(Bildtext == null) Text2_Bild = ""; if(Bild_Breite == "") Text3_Bild = ""; if(Bild_Breite == null) Text3_Bild = ""; if(Bild_Hoehe == "") Text4_Bild = ""; if(Bild_Hoehe == null) Text4_Bild = ""; var Tag_Bild = "<img"+Text1_Bild+Text2_Bild+Text3_Bild+Text4_Bild+">"; document.getElementById('HTML_der_Seite').value += Tag_Bild; } function E_Mail() { { if((E_Mail_x == 0) && (E_Mail_y == 0)) E_Mail_offen(); if((E_Mail_x == 1) && (E_Mail_y == 0)) E_Mail_geschlossen(); } E_Mail_y = 0; } function E_Mail_offen() { var E_Mail = ""; E_Mail = prompt("Gib die E-Mail Adresse ein",""); var Text1_E_Mail = ' href="mailto:'+E_Mail+'"'; if(E_Mail == "") Text1_E_Mail = ""; if(E_Mail == null) Text1_E_Mail = ""; var Tag_E_Mail = "<a"+Text1_E_Mail+">"; document.getElementById('HTML_der_Seite').value += Tag_E_Mail; document.getElementById('E-Mail').value = "... E-Mail *"; E_Mail_x = 1; E_Mail_y = 1; } function E_Mail_geschlossen() { document.getElementById('HTML_der_Seite').value += "</a>"; document.getElementById('E-Mail').value = "E-Mail ..."; E_Mail_x = 0; E_Mail_y = 1; } function horizontale_Linie() { var horizontale_Linie = ""; horizontale_Linie = prompt("Farbe der horizontalen Linie (z.B.: red, orange, yellow, green, blue, black)nKeine Eingabe = Standardfarbe",""); var Text1_horizontale_Linie = ' color="'+horizontale_Linie+'"'; if(horizontale_Linie == "") Text1_horizontale_Linie = ""; if(horizontale_Linie == null) Text1_horizontale_Linie = ""; var Tag_horizontale_Linie = "<hr"+Text1_horizontale_Linie+">"; document.getElementById('HTML_der_Seite').value += Tag_horizontale_Linie; } function Laufschrift() { { if((Laufschrift_x == 0) && (Laufschrift_y == 0)) Laufschrift_offen(); if((Laufschrift_x == 1) && (Laufschrift_y == 0)) Laufschrift_geschlossen(); } Laufschrift_y = 0; } function Laufschrift_offen() { var Laufschrift = ""; var Laufschrift_Breite = ""; var Laufschrift_Hoehe = ""; var Laufschrift_Verhalten = ""; var Laufschrift_Richtung = ""; var Laufschrift_Geschwindigkeit = ""; var Laufschrift_Verzoegerung = ""; var Laufschrift_Umlauf = ""; var Laufschrift_Hintergrundfarbe = ""; Laufschrift_Breite = prompt("Breite der LaufschriftnKeine Eingabe = Standardbreite",""); Laufschrift_Hoehe = prompt("Höhe der LaufschriftnKeine Eingabe = Standardhöhe",""); Laufschrift_Verhalten = prompt("Verhalten der Laufschrift: oszilieren: alternate, einschieben: slidenKeine Eingabe = Umlaufen",""); Laufschrift_Richtung = prompt("Richtung der Laufschrift nach links: left, nach rechts: rightnKeine Eingabe = normale Richtung",""); Laufschrift_Geschwindigkeit = prompt("Geschwindigkeit der LaufschriftnKeine Eingabe = Standardgeschwindigkeit (6)",""); Laufschrift_Verzoegerung = prompt("Verzögerung der LaufschriftnKeine Eingabe = Standardverzögerung (80)",""); Laufschrift_Umlauf = prompt("Wiederholungsdurchgänge der Laufschrift (-1 = kontinuierlich)nKeine Eingabe = kontinuierlich wiederholen",""); Laufschrift_Hintergrundfarbe = prompt("Hintergrundfarbe der Laufschrift (z.B.: red, orange, yellow, green, blue, black)nKeine Eingabe = keine Hintergrundfarbe",""); var Text1_Laufschrift = ' width="'+Laufschrift_Breite+'"'; var Text2_Laufschrift = ' height="'+Laufschrift_Hoehe+'"'; var Text3_Laufschrift = ' behavior="'+Laufschrift_Verhalten+'"'; var Text4_Laufschrift = ' direction="'+Laufschrift_Richtung+'"'; var Text5_Laufschrift = ' scrolldelay="'+Laufschrift_Verzoegerung+'"'; var Text6_Laufschrift = ' scrollamount="'+Laufschrift_Geschwindigkeit+'"'; var Text7_Laufschrift = ' loop="'+Laufschrift_Umlauf+'"'; var Text8_Laufschrift = ' bgcolor="'+Laufschrift_Hintergrundfarbe+'"'; if(Laufschrift_Breite == "") Text1_Laufschrift = ""; if(Laufschrift_Breite == null) Text1_Laufschrift = ""; if(Laufschrift_Hoehe == "") Text2_Laufschrift = ""; if(Laufschrift_Hoehe == null) Text2_Laufschrift = ""; if(Laufschrift_Verhalten == "") Text3_Laufschrift = ""; if(Laufschrift_Verhalten == null) Text3_Laufschrift = ""; if(Laufschrift_Richtung == "") Text4_Laufschrift = ""; if(Laufschrift_Richtung == null) Text4_Laufschrift = ""; if(Laufschrift_Geschwindigkeit == "") Text5_Laufschrift = ""; if(Laufschrift_Geschwindigkeit == null) Text5_Laufschrift = ""; if(Laufschrift_Verzoegerung == "") Text6_Laufschrift = ""; if(Laufschrift_Verzoegerung == null) Text6_Laufschrift = ""; if(Laufschrift_Umlauf == "") Text7_Laufschrift = ""; if(Laufschrift_Umlauf == null) Text7_Laufschrift = ""; if(Laufschrift_Hintergrundfarbe == "") Text8_Laufschrift = ""; if(Laufschrift_Hintergrundfarbe == null) Text8_Laufschrift = ""; var Tag_Laufschrift = "<marquee"+Text1_Laufschrift+Text2_Laufschrift+Text3_Laufschrift+Text4_Laufschrift+Text5_Laufschrift+Text6_Laufschrift+Text7_Laufschrift+Text8_Laufschrift+">"; document.getElementById('HTML_der_Seite').value += Tag_Laufschrift; document.getElementById('Laufschrift').value = "... Laufschrift *"; Laufschrift_x = 1; Laufschrift_y = 1; } function Laufschrift_geschlossen() { document.getElementById('HTML_der_Seite').value += "</marquee>"; document.getElementById('Laufschrift').value = "Laufschrift ..."; Laufschrift_x = 0; Laufschrift_y = 1; } function alles_loeschen() { document.getElementById('HTML_der_Seite').value = ""; } function initEditor() { document.write('<table border="0" cellspacing="1" cellpadding="1" width="50%" style="border: 1px solid; border-color: #000000">'); document.write(' <tr>'); document.write(' <td width="50%">'); document.write(' <input type="button" id="Zeile" onclick="javascript:Zeile()" value="Zeile ...">'); document.write(' <input type="button" id="b" value="b" onclick="javascript:Text_fett()" style="font-weight: bold">'); document.write(' <input type="button" id="k" value="k" onclick="javascript:Text_kursiv()" style="font-style: italic">'); document.write(' <input type="button" id="u" value="u" onclick="javascript:Text_unterstrichen()" style="text-decoration: underline">'); document.write(' <input type="button" id="Schrift" onclick="javascript:Schrift()" value="Schrift ...">'); document.write(' <input type="button" id="Zeilenumbruch" onclick="javascript:Zeilenumbruch()" value="Zeilenumbruch">'); document.write(' <input type="button" id="Hyperlink" onclick="javascript:Hyperlink()" value="Hyperlink ...">'); document.write(' <input type="button" id="Bild" onclick="javascript:Bild()" value="Bild">'); document.write(' <input type="button" id="E-Mail" onclick="javascript:E_Mail()" value="E-Mail ...">'); document.write(' <input type="button" id="horizontale_Linie" onclick="javascript:horizontale_Linie()" value="horizontale Linie">'); document.write(' <input type="button" id="Laufschrift" onclick="javascript:Laufschrift()" value="Laufschrift ...">'); document.write(' <p><tex'+'tarea id="HTML_der_Seite" rows="10" cols="65" name="HTML_der_Seite"></te'+'xtarea></p>'); document.write(' <p><input type="button" id="Aenderungen_uebernehmen" value="Änderungen übernehmen" onclick="javascript:Seite_editieren()">'); document.write(' <input type="button" id="alles_loeschen" value="alles löschen" onclick="javascript:alles_loeschen()"></p>'); document.write(' <p><u><font face="Arial" size="3">Editierte Seite:</font></u></p>'); document.write(' </td>'); document.write(' </tr>'); document.write(' <tr>'); document.write(' <td width="50%" style="border: 1 solid; border-color: #000000"><div id="editierbare_Seite"> </div></td>'); document.write(' </tr>'); document.write('</table>'); } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/verschiedenes/seite-bearbeiten-mit-javascript-editor/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">initEditor();</script> <!-- präsentiert von kostenlose-javascripts.de -->