Seite bearbeiten mit Javascript Editor Javascript

Seite bearbeiten mit Javascript Editor

( 665 Bewertungen )'); document.write(' '); document.write(' '); document.write(' '); document.write(' '); document.write('

JavaScripts - Verschiedenes

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.

<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: right\nKeine 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öße\n\Keine 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("Bildtext\nKeine Eingabe = kein Bildtext",""); Bild_Breite = prompt("Breite des Bildes\nKeine Eingabe = Breite aus URL holen",""); Bild_Hoehe = prompt("Höhe des Bildes\n 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 Laufschrift\nKeine Eingabe = Standardbreite",""); Laufschrift_Hoehe = prompt("Höhe der Laufschrift\nKeine Eingabe = Standardhöhe",""); Laufschrift_Verhalten = prompt("Verhalten der Laufschrift: oszilieren: alternate, einschieben: slide\nKeine Eingabe = Umlaufen",""); Laufschrift_Richtung = prompt("Richtung der Laufschrift nach links: left, nach rechts: right\nKeine Eingabe = normale Richtung",""); Laufschrift_Geschwindigkeit = prompt("Geschwindigkeit der Laufschrift\nKeine Eingabe = Standardgeschwindigkeit (6)",""); Laufschrift_Verzoegerung = prompt("Verzögerung der Laufschrift\nKeine 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><textarea id="HTML_der_Seite" rows="10" cols="65" name="HTML_der_Seite">

'); document.write('

Editierte Seite:

'); document.write('

'); } //-->
 <div id="kostenlosejavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/dsl-anbieter-vergleich.html" title="DSL Tarife vergleichen" target="_blank">DSL Tarife vergleichen</a></div>

Ähnliche Javascripts:

Kommentare

#21 13.08.2009 11:00

Super Editor!!

#20 14.06.2009 22:08

finde, es wäre zeit fuer version 2

#19 14.06.2009 22:07

ja, html 4.1
aber top aktuell wäre xhtml 1.1
is aber auch egal.

#18 26.02.2009 16:04

@ Supermauzer1:

1) Wegen Name des Editors, siehe meinen letzten Beitrag

2) Wieso, meine Webseite hat auch einige align Attribute und ist HTML 4.1 valide (Prüfbutton ganz unten)!

#17 26.01.2009 19:56

An den Schreiber des Scripts:
Super Editor!

,aber ich hätte ihn ja HTML-editor genannt,nicht JavaScript-editor. Und außerdem: Schon mal was vom world wide web consortium(w3c) gehört? Das Attribut 'align' ist schon seit Jahren nicht mehr standart-konform.

Niemand ist Perfekt, trotzdem ein super Script!

#16 18.12.2008 02:44

@ Script2:

1) Den Editor "Javascript Editor" zu nennen war die Idee von kostenlose-javascripts.de, ich hätt ihn ja eher "HTML Editor" genannt

2) p,b,i,u,font,br,a und hr sollten an und für sich in allen Browsern gehn

#15 27.11.2008 15:05

Ich finde, diesen Editor nicht so gut:

- Der Name "JavaScript-Editor" ist falsch, da dieser Editor kein JavaScript kennt.
- Selbst die meisten HTML-Tags lassen sich nicht anwenden.

#14 08.10.2008 14:12

die Laufschrift fuktioniert bei mir auch nicht! Hab IE browser obs wohl daran liegt

#13 16.08.2008 16:57

wo tut man diesen code eingeben und wie bitte hilft mir

wie tut man diese code eingeben

auf eure seite?!

#12 26.07.2008 01:40

@ Andy007:
>damit kann man alles machen:
ne nicht wirklich...z.B. videos...oder tabellen oder buttons etc.

#11 26.07.2008 01:37

genial für die die noch anfänger in HTML sind

...nun ich kenn mich mit HTML gut aus und weiß das der marquee-tag nicht wirklich zum standart gehört...

funzt bei mir nämlich nicht... XD

#10 29.05.2008 22:05

Das ist voll Cool das kann ich gut für meine Homepage gebrauchen

#9 19.05.2008 20:12

Cool sowas

Gut gemacht

#8 30.04.2008 20:52

Hammer geil damit kann man alles machen !!!

#7 21.04.2008 19:55

Ich glaub, das bezieht sich auf die Sprache, in der der Editor geschrieben ist! Ich hätte ihn eigentlich nur Editor genannt, aber kostenlose-javascripts.de hat ja das Recht, die eingesendeten Scripts abzuändern

#6 15.04.2008 20:58

huier bei geht es das das webradio sich beliebt macht

#5 13.04.2008 15:57

Naja, wieso heißt er Javascript Editor wenn man doch nur HTML damit machen kann?

#4 31.03.2008 20:51

wo man den code eingibt???
hast du schon mal versucht das textfeld zu verwenden?

#3 02.02.2008 21:31

wie tut man diese code eingeben

#2 02.02.2008 21:23

wo tut man diesen code eingeben und wie bitte hilft mir

#1 28.01.2008 12:21

Richtig cool

Kommentare aktualisieren
RSS feed für die Kommentare bei diesem Javascript.

Kommentare

Login