WYSIWYG- Editor @ tutorials.de: Tutorials, Forum & Hilfe

Vertigo21 · 27.09.05 09:18

Hallo zusammen.

Ich habe vor kurzem diesen Editor im Netz gefunden:

http://web5.kdnr543.w-cct.de/richtext.htm

Der Autor stellt ihn als Freeware zur Verfügung und daher habe ich ihn mir für meine Seite (sehr geringfügig) angepasst. Alle funktioniert optimal bis auf eine Sache:

Bei Eingaben innerhalb des Internet Explorers wird beim Druck auf die Enter-Taste statt eines Zeilenumbruchs ein Absatz erzeugt. Im daraus resultierenden Quelltext steht dann auch ein statt eines .

Ich weiß leider viel zu wenig von JS um den Fehler zu finden. Vielleicht weiß ja einer von euch Rat.

***********EDIT***********
Noch eine kleine Erläuterung:
Der Editor unter der URL funktioniert mit Mozilla normal. Nur mit dem Internet Explorer macht er zicken. Ich kann den Fehler nicht finden...

Meine Version:

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
           <HTML>
           <HEAD>
           <TITLE>richtext</TITLE>
           <META http-equiv=Content-Type content="text/html; charset=windows-1252">
           </HEAD>
           
           <STYLE type=text/css>
 body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #cdcdcd; background-color: #FFFFFF; margin: 25px 25px 25px 25px;}
           .imagebutton {  WIDTH: 26px; HEIGHT: 26px; }
           .image      {    WIDTH: 26px; HEIGHT: 26px; }
           .toolbar  {  HEIGHT: 30px; BACKGROUND-COLOR: #FFFFFF; }
           #edit { border: solid 1px #CDCDCD; }
           
           </STYLE>
           
           <SCRIPT type="text/javascript">
           //<!--
           var uagent = navigator.userAgent.toLowerCase();
           var ie_ok = -1;
           var gecko_ok = -1;
           
           
           if(uagent.indexOf("gecko") && navigator.productSub >= 20030210)
           {  gecko_ok=1; }
           
 if(uagent.indexOf("msie") != -1 && uagent.indexOf("opera")== -1 && (uagent.indexOf("msie 5.5") || uagent.indexOf("msie 6.")))
           {  ie_ok = 1;  }
           
           
           function InitToolbarButtons()
           {
             kids = document.getElementsByTagName('DIV');
             for (var i=0; i < kids.length; i++) 
             {
            if (kids[i].className == "imagebutton") 
            {
              kids[i].onclick = tbclick;
            }
             }
           }
           
           function tbmousedown(e)
           {
             if(gecko_ok==1)
             {
            e.preventDefault();
             }
           }
           
           function tbmouseout(id)
           {
             document.images[id].src="images/buttons/"+ id +"n.gif";
           }
           
           function tbmouseover(id)
           {
             document.images[id].src="images/buttons/"+ id +"a.gif";
           }
           
           function tbclick()
           {
             if(this.id ==  'createlink')
             {
             if(ie_ok == 1)
             {
              edit.document.execCommand('createlink'); 
              edit.focus();
             }
             
             if(gecko_ok == 1)
             {  
              var szURL = prompt("Enter a URL:", "");
     document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL);
             } 
             }
             else
             {
              if(gecko_ok == 1)
              {
            document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
              }
              if(ie_ok == 1)
              {
            edit.document.execCommand(this.id, false, null);
            edit.focus();
              } 
             }
           }
           
           function Start()
           {
             if(gecko_ok == 1)
             {
             document.getElementById('edit').contentWindow.document.designMode = "on";
             try
             {
             document.getElementById('edit').contentWindow.document.execCommand("undo", false, null);
             }
             catch (e)
             {
             gecko_ok = -1;
             }
             }
           }
           
           function processData()
           {
             if(ie_ok==1) var htmlCode = edit.document.body.innerHTML;
             if(gecko_ok==1) var htmlCode = document.getElementById('edit').contentWindow.document.body.innerHTML;
             document.artikelform.artikel.value = htmlCode;
           
             if(document.artikelform.artikel.value == '')
             {
            alert('Da is nix drinnen ... das nicht gut!');
            return false;
             }
             else
             {
            alert(document.artikelform.artikel.value);
            return false;
             }
           }
           //-->
           </SCRIPT>
           <BODY onload="Start()">
           <form onSubmit="return processData()" name="artikelform" action="" method="post">
           <div style="border-top:solid 1px #CDCDCD; width: 400px;">
           <TABLE id=toolbar width="400">
             <TBODY>
             <TR>
            <TD width=26>
              <DIV class="imagebutton" id="bold">
            <a href="#"><IMG name="bold" class="image" title="Bold" alt="Bold"
     src="images/buttons/boldn.gif" width="26" height="26" border="0" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>
              </DIV>
            </TD>
            <TD width=26>
              <DIV class="imagebutton" id="italic">
    <a href="#"><IMG class="image" name="italic" title="Italic" alt="Italic" border="0" src="images/buttons/italicn.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>
              </DIV>
            </TD>
            <TD width=26>
              <DIV class=imagebutton id=underline>
    <a href="#"><IMG class="image" name="under" title="Underline" alt="Underline" border="0" src="images/buttons/undern.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>
              </DIV>
            </TD>
            <TD width="33%">&nbsp;</TD>
            <TD width=26>
              <DIV class=imagebutton id=justifyleft style="LEFT: 10px">
    <a href="#"><IMG class="image" name="left" title="Align Left" alt="Align Left" border="0" src="images/buttons/leftn.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>   
           
              </DIV>
            </TD>
            <TD width=26>
              <DIV class=imagebutton id=justifycenter style="LEFT: 40px">
    <a href="#"><IMG class="image" name="center" title="Center" alt="Center" border="0" src="images/buttons/centern.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>   
              </DIV>
            </TD>
            <TD width=26>
              <DIV class=imagebutton id=justifyright style="LEFT: 70px">
    <a href="#"><IMG class="image" name="right" title="Align Right" alt="Align Right" border="0" src="images/buttons/rightn.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>   
              </DIV>
            </TD>
            <TD width="34%">&nbsp;</TD>
            <TD width=26>
              <DIV class=imagebutton id=insertorderedlist style="LEFT: 10px">
    <a href="#"><IMG class="image" name="ol" title="Ordered List" alt="Ordered List" border="0" src="images/buttons/oln.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>   
              </DIV>
            </TD>
            <TD width=26>
              <DIV class=imagebutton id=insertunorderedlist style="LEFT: 40px">
    <a href="#"><IMG class="image" name="ul" title="Unordered List" alt="Unordered List" border="0" src="images/buttons/uln.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>   
              </DIV>
            </TD>
              <TD width="33%">&nbsp;</TD>
              <TD width=26>
              <DIV class=imagebutton id=createlink style="LEFT: 40px">
    <a href="#"><IMG class="image" name="web" title="Hyperlink" alt="Hyperlink" border="0" src="images/buttons/webn.gif" onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);" /></a>   
              </DIV>
              </TD>
           </TR>
           </TABLE>
           </div>
           <IFRAME id="edit" src="edit.htm" width="400" height="200" frameborder="0"></IFRAME>
           <textarea name="artikel" style="visibility:hidden;"></textarea>
           <div style="width: 400px;" align="center"><input type="submit" value="Source zeigen"></div>
           </form>
           <SCRIPT>
           if(ie_ok==1) edit.document.designMode = 'On';
           InitToolbarButtons();
           // testausgabe
           document.write("dein browser: " + uagent+"<br><br>");  
           // testausgabe
           </SCRIPT>
           <img src="count.php" width=1 height=1 />
           </BODY>
           </HTML>

Sven Mintel · 27.09.05 16:42

Das ist kein Fehler, sondern das normale Verhalten des IE im DesignMode..... IE und Mozilla verwenden da unterschiedliche Techniken.

Um das zu Unterbinden, musst du die Tastatureingaben überwachen und im Fall eines [ENTER] selbige canceln und stattdessen ein an der Stelle einfügen.
Eine andere Möglichkeit wäre es, nach dem Senden der Sache serverseitig leere Absätze durch ein zu ersetzen.

Vertigo21 · 28.09.05 11:00

Zitat von Sven Mintel

Um das zu Unterbinden, musst du die Tastatureingaben überwachen und im Fall eines [ENTER] selbige canceln und stattdessen ein an der Stelle einfügen.

Genau das hattest du ja schon im PHP-Forum vorgeschlagen und ich weiß noch immer nicht wie ich das machen soll. Hast du evtl. ein Stichwort zum googeln oder einen Link für mich?

**********Edit**********
Frage hat sich teilweise erledigt, siehe:

http://www.tutorials.de/tutorials203...t=%FCberwachen
http://www.tutorials.de/tutorials190...t=%FCberwachen

R00Ki3 · 04.11.05 17:29

Hi, ich hätte auch noch eine Frage zu dem editor...
Ich hab ihn mir angesehen fande das ganze recht nett...
Bekomme das auch gebacken das er die variablen übergibt und in die Datenbank einträgt.

-Jetzt mal eine andere Frage:
Ist es möglich die Daten aus der Datenbank auszulesen und in den editor einzufügen, so das ich bereits erstellte texte nochmal bearbeiten kann.
Ich habe von java 0Ahnung...
Habe es bis jetzt versucht indem ich einfach die Variablen in das iframe eingefügt habe (funkt aber nicht)...
Und halt die Werte in die nichtsichtbare textarea...

->Danke für jeden Tip.

***con-f-use*** · 04.11.05 17:48

Es gibt zwei Möglichkeiten: Du erzeugst mit einer serverseitigen Sprache ein Dokument mit dem aktualisieren Inhalt und weist es dem Iframe als src zu, oder du schreibst den Inhalt über NameDesIframes.document.write('Inhalt') in den Iframe (Wichtig dabei: open und close nicht vergessen).

Um mal ein wenig eigenwerbung zu machen. Unter http://confus.co.funpic.de/_data/tut/editor.html findet ihr einen von mir geschriebenen Editor, der sehr kompakt und übersichtlich ist.

R00Ki3 · 06.11.05 15:43

Thnx für die Hilfe es funktioniert.
Nur so nebenbei bin auf deinen Editor umgestiegen und habe nen bilder anstatt text eingefügt einige funktionen raus andere rein.
Nochmal danke....

***con-f-use*** · 06.11.05 19:18

Na dann fein, freut mich zu hören - noch ein Bekehrter...

Bitte noch: http://www.tutorials.de/tutorials215...ml#post1122340

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

WYSIWYG Editor für C#

wysiwyg-editor

WYSIWYG Editor

Wysiwyg-Editor und IE6

CMS mit WYSIWYG Editor

E-Mail:

Abonnieren Abbestellen