Auf javascript basierender text editor

CPU

Lieutenant
Dabei seit
Jan. 2006
Beiträge
704
Hi Leute,

soweit habe ich es schon geschafft:


Code:
<body onload="fnInit();editor.focus();">
<script>
function fnInit()
{
for (i=0; i<document.all.length; i++) document.all(i).unselectable = "on";
eingabe.document.body.innerHTML= document.formular.htmltext.value;
return true;
}
//////////////////////////////////////
function s()
{
eingabe.document.execCommand("SaveAs","true","doc1.html")
}
function h()
{
a=window.open('','Hyperlink','width=350,height=175,left=115,top=99');
a.document.write('<html><head><title>[Editor - Hyperlink einfügen]</title><head><body body scroll="no" bgcolor="#E9ECD8">');
a.document.write('<scr'+'ipt>location.href="link.html";</scr'+'ipt><noscript><font face="Trebuchet MS" sicze="3"><br><b><center>Bitte deaktiviern Sie den Blocker!</b></center></noscript>');
a.document.write('</body></html>');
}
function nb()
{
a=window.open('','Bild','width=350,height=120,left=115,top=99');
a.document.write('<html><head><title>[Editor - Bild einfügen]</title><head><body body scroll="no" bgcolor="#E9ECD8">');
a.document.write('<scr'+'ipt>location.href="bild.html";</scr'+'ipt><noscript><font face="Trebuchet MS" sicze="3"><br><b><center>Bitte deaktiviern Sie den Blocker!</b></center></noscript>');
a.document.write('</body></html>');
}
function sz()
{
a=window.open('','Sonderzeichen','width=350,height=150,left=115,top=99');
a.document.write('<html><head><title>[SZ Editor - Sonderzeichen]</title><head><body body scroll="no" bgcolor="#E9ECD8">');
a.document.write('<scr'+'ipt>location.href="szeichen.html";</scr'+'ipt><noscript><font face="Trebuchet MS" sicze="3"><br><b><center>Bitte deaktiviern Sie den Blocker!</b></center></noscript>');
a.document.write('</body></html>');
}
</script>

<form name="formular" onSubmit="s();">

<!-- Optionen zum anordenen des Textes -->

<img src="pic/s.gif" onclick="javascript:s()" alt="Speichern" width="23" height="22">
<img src="pic/p.gif" onclick="eingabe.document.execCommand('Print');" alt="Drucken" width="23" height="22">
<img onclick='eingabe.document.execCommand("Cut");' border="0" src="pic/a.gif" alt="Ausschneiden" width="23" height="22">
<img onclick='eingabe.document.execCommand("Copy");' border="0" src="pic/c.gif" alt="Kopieren" width="23" height="22">
<img onclick='eingabe.document.execCommand("Paste");' border="0" src="pic/e.gif" alt="Einfügen" width="23" height="22">
<img onclick='javascript:h()' src="pic/h.gif" border=0 alt="Hyperlink einfügen" width="23" height="22">
<img onclick='javascript:nb()' src="pic/g.gif" border=0 alt="Bild einfügen" width="23" height="22">
<img onclick='javascript:sz()' src="pic/sz.gif" border=0 alt="Sonderzeichen" width="23" height="22">

<select size="1" style="width=150" id="schriftart" onChange="eingabe.document.execCommand('fontname','', this[this.selectedIndex].value);this.selectedIndex=0" name="schriftart">
<option selected>[Schriftart]</option>
<option value="Arial">Arial</option>
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
<option value="Impact">Impact</option>
<option value="Lucida Console">Lucida Console</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>

<select size="1" id="schriftgroesse" onChange="eingabe.document.execCommand('fontsize','', this[this.selectedIndex].value);this.selectedIndex=0" name="schriftgroesse">
<option selected>[Schriftgröße]</option>
<option value="1">8</option>
<option value="2">10</option>
<option value="3">12</option>
<option value="4">14</option>
<option value="5">18</option>
<option value="6">24</option>
<option value="7">36</option>
</select>

<img onclick='eingabe.document.execCommand("Bold");' src="pic/f.gif" border=0 alt="Fett" width="23" height="22">
<img onclick='eingabe.document.execCommand("Italic");' src="pic/k.gif" border=0 alt="Kursiv" width="23" height="22">
<img onclick='eingabe.document.execCommand("Underline");' src="pic/u.gif" border=0 alt="Unterstrichen" width="23" height="22">
<img onclick='eingabe.document.execCommand("Justifyleft");' src="pic/l.gif" border=0 alt="Linksbündig" width="23" height="22">
<img onclick='eingabe.document.execCommand("Justifycenter");' src="pic/m.gif" border=0 alt="Zentriert" width="23" height="22">
<img onclick='eingabe.document.execCommand("Justifyright");' src="pic/r.gif" border=0 alt="Rechtsbündig" width="23" height="22">
<img onclick='eingabe.document.execCommand("Insertorderedlist");' src="pic/p_z.gif" border=0 alt="Nummerierung" width="23" height="22">
<img onclick='eingabe.document.execCommand("Insertunorderedlist");' src="pic/p_b.gif" border=0 alt="Aufzählung" width="23" height="22">
<img onclick='eingabe.document.execCommand("Outdent");' src="pic/tab_l.gif" border=0 alt="Einzug verkleinern" width="23" height="22">
<img onclick='eingabe.document.execCommand("Indent");' src="pic/tab_r.gif" border=0 alt="Einzug vergrößern" width="23" height="22">

<!-- generiere editierbaren iframe -->

<div style="border:solid 1px;">
<script>
frame='<iframe class="eingabe" frameborder="0" width="100%" ID="eingabe" height="479"></iframe>';
document.open();
document.write(frame);
document.close();
eingabe.document.open();
eingabe.document.close();
eingabe.document.designMode="On";
</script>
</div>
<br>
<input type="submit">
</form>
jedoch ich weiß nicht mehr weiter:

Wie kann ich es erreichen, dass ich den html-code anzeigen kann und ihn an eine php Datei übergeben kann?

Und wie kann ich andere html Dokumente öffnen!

Danke für Eure Hilfe!

CPU
 
Top