WYSIWYG Editor im Mozilla - <br>Tag am Anfang des IFrame-Inhalts

[chaostilo]

Hallo,

ich sitz hier schon seit mehreren Stunden dran, dem Mozilla meinen selbst gebastelten WYSIWYG-Editor überzuhelfen. Soweit so gut, nachdem ich es endlich mal geschafft hab, daß der Text zumindest editierbar ist und auch alles mit dem Abspeichern des Textes in der DB funzt steh ich vor einem für mich mittlerweile unlösbaren Problem...

Also der WYSIWYG-Editor soll das bearbeiten eines Websiteinhalts ohne Prog-Kenntnisse möglich machen. Der Editor funktioniert im IE schon seit langem problemlos, unter Mozilla ging er bisher noch nicht. Wenn der Text aus der DB gelesen wird und in dem IFrame eingebunden wird, fügt der Mozilla vor diesem Text ein <br>Tag ein. Der IE hingegen nicht. Dieses <br>Tag ist allerdings nicht Bestandteil des Textes aus der DB...mit anderen Worten, es scheint vom Himmel zu fallen.

Vieleicht findet Ihr ja einen Fehler im Quellcode, ich bekomm's irgendwie nicht gebacken, den Fehler zu finden:

Quellcode für designMode="on" etc.:

<script language="JavaScript">

function load()
    {
    if(document.all)
      {
      document.editor.document.designMode="On";
      }
    else
      {
      window.document.body.designMode="On";
      }
    }

function schreibe()
{
  if (document.all)
  {
  document.bildtextedit.seiteninh.value = document.editor.document.body.innerHTML;
  }
  else
  {
  document.bildtextedit.seiteninh.value = document.getElementById("editor").contentWindow.document.body.innerHTML;
  }
}

function createLink(Befehl)
{
     if (document.all)
     {
          document.editor.document.execCommand(Befehl,false,';')
     }
     else
     {
     document.getElementById("editor").contentWindow.document.execCommand(Befehl,false,';')
     Befehl.parentElement().innerText=Befehl.parentElement().href;
     document.execCommand("ForeColor","false","#FF0033");
     }
}

function Formatierung(Befehl)
  {
  if (document.all)
    {
    document.editor.document.execCommand(Befehl,false,';')
    }
  else
    {
    document.getElementById("editor").contentWindow.document.execCommand(Befehl,false,';')
    }
  }

function Schriftgr(Befehl, Groesse)
  {
  if (document.all)
    {
    document.editor.document.execCommand(Befehl,false,Groesse)
    }
  else
    {
    document.getElementById("editor").contentWindow.document.execCommand(Befehl,false,Groesse)
    }
  }
</script>

Der Quellcode vom Editor:
<div style="margin-left:100px;"><select name="schriftgroesse" onchange="Schriftgr('fontsize',schriftgroesse.value);">
        <option value=1>1
        <option value=2>2
        <option value=3>3
        <option value=4>4
        <option value=5>5
        <option value=6>6
        <option value=7>7
        </select>
        <img src="grafiken/fett.gif" onclick="Formatierung('bold');" width="16" height="16" border="0" alt="Fett">
        <img src="grafiken/kursiv.gif" onclick="Formatierung('italic');" width="16" height="16" border="0" alt="Kursiv">
        <img src="grafiken/unterstr.gif" onclick="Formatierung('underline');" width="16" height="16" border="0" alt="Unterstrichen">
        <img src="grafiken/links.gif" onclick="Formatierung('JustifyLeft');" width="16" height="16" border="0" alt="Linksb&uuml;ndig">
        <img src="grafiken/zentr.gif" onclick="Formatierung('JustifyCenter');" width="16" height="16" border="0" alt="Zentriert">
        <img src="grafiken/rechts.gif" onclick="Formatierung('JustifyRight');" width="16" height="16" border="0" alt="Rechtsb&uuml;ndig">
        <img src="grafiken/block.gif" onclick="Formatierung('JustifyFull');" width="16" height="16" border="0" alt="Blocksatz">
        <img src="grafiken/listnum.gif" onclick="Formatierung('InsertorderedList');" width="16" height="16" border="0" alt="Nummerierung">
        <img src="grafiken/listbull.gif" onclick="Formatierung('InsertunorderedList');" width="16" height="16" border="0" alt="Aufz&auml;hlungszeichen">
        <img src="grafiken/einzr.gif" onclick="Formatierung('Indent');" width="16" height="16" border="0" alt="Einzug vergr&ouml;&szlig;ern">
        <img src="grafiken/einzl.gif" onclick="Formatierung('Outdent');" width="16" height="16" border="0" alt="Einzug verkleinern">
        <iframe src="funktionen/leer.php" name="editor" id="editor" width="590" height="200" onload="load();"></iframe>
        </div>

und der Code vom IFrame:

if ($_SESSION['identnr']==2)
   {
   echo <<<FORM
   <html>
   <head>
   <title>Bearbeitungsvorlage</title>
   <meta name="author" content="Tilo Schulz">
   <meta name="generator" content="Ulli Meybohms HTML EDITOR">
   <meta http-equiv="Content-Style-Type" content="text/css"></meta>
   </head>
FORM;
   echo '<body style="font-size:16px; font-family:TimesNR; background-color:#FFFFFF" contentEditable="true">';
   echo $_SESSION['seiteninhalt'];
   echo '</body>
   </html>';
   }

Nicht wundern, da ist auch ein bissel php bei, was u. a. für Zugriffsrechte zuständig ist.

Wie gesagt, fügt der Mozilla immer ein <br>Tag vor dem eingefügten Text aus der DB ein...Probelm...wird z. B. nur ein Bild in dem Formular bearbeitet und der Text nicht verändert, wird dieses <br>Tag natürlich in der DB mit abgespeichert. D. h. beim nächsten bearbeiten mit dem Mozilla stehen zwei <br> am Anfang des Textes...das eine, welches beim letzten mal abgespeichert wurde + ein weiteres, welches wieder vom Himmel gefallen ist...eigentlich ne ziemlich kleine Sache, aber je kleiner der Fehler umso länger die Suche danach :/. Ich hab mir den Text nochmal außerhalb des IFrame ausgeben lassen und im Quelltext der Seite dann nachgesehen. Dort erscheint kein führendes <br>Tag. Auch den DB-Eintrag an sich hab ich gecheckt...Ergebnis: auch kein <br> da. Irgendwie muss das <br>Tag also im IFrame, im Editor-Skript oder durch Javascript da reinrutschen...(angesichts meiner Javascript-Fähigkeiten, vermute ich den Fehler im Javascript :) )

Danke im Voraus

MfG

Tilo

[chaostilo]

Hab mittlerweile nochmal das Javascript geändert (war ein Fehler drin):

<script language="javascript" type="text/javascript">

if(document.all)
      {
      document.editor.document.designMode="On";
      }
    else
      {
      document.getElementByID("editor").contentWindow.document.body.designMode="On";
      }
...

Hat am Problem allerdings nichts geändert. Wenn man allerdings die IFrame-Datei während der Bearbeitung in einem neuen Browserfenster öffnet und sich den Quellcode ansieht steht dort auch KEIN <br> am Anfang des Textes obwohl es parallel dazu im IFrame eindeutig da ist?! und ja auch abgespeichert wird, wenn man es nicht rauslöscht.

[chaostilo]

Hallo,

also ich hab das jetzt doch selbst gebacken bekommen.

Das Problem, wer hätte es gedacht, lag im Javascript...ich sollte wohl nochmal was über Javascript und DOM lesen :) ...

Auf alle Fälle sieht die Sache jetzt so aus, daß ich das Script für das Umschalten auf den Bearbeiten-Modus in die Datei des IFrame gepackt habe.

Das Script sieht jetzt so aus:

echo <<<FORM
   <html>
   <head>
   <title>Bearbeitungsvorlage</title>
   <meta name="author" content="Tilo Schulz">
   <meta name="generator" content="Ulli Meybohms HTML EDITOR">
   <meta http-equiv="Content-Style-Type" content="text/css"></meta>
   <script type="text/javascript" language="JavaScript">
   function load()
      {
      if (document.all)
        {
        document.body.contentEditable='true';
        }
      else
        {
        document.designMode='on';
        }
      }
    </script>
    </head>
FORM;
   echo '<body style="font-family:TimesNR; background-color:#FFFFFF" onload="load()">'; echo $_SESSION['seiteninhalt']; echo '</body></html>';

Das Problem trat auf beim direkten Aufruf von contentEditable im body-Tag der IFrame-Datei. Als ich beides in eine extra Funktion gepackt habe, die ich beim laden des body-Tags aufrufe, hat's dan endlich problemlos funktioniert.

MfG

Tilo

[Felix Riesterer]

Lieber chaostilo,

ich betrachte in Ehrfurcht, was Du da probierst. Es ist eine höchst undankbare Aufgabe, mit JavaScript die WYSIWYG-Editoren der verschiedenen Browser "unter einen Hut" zu bringen.

Ich will im Grunde Deinen Ethusiasmus und Deine Experimentierfreude nicht hemmen... aber gerade dieses Unterfangen kostet so extrem viel Zeit, dass Du unter Umständen besser beraten wärst, auf eine bereits sehr ausgereifte und zuverlässige Lösung zurückzugreifen.

Ich benutze den TinyMCE von Moxiecode, der sehr weitreichend konfigurierbar ist, und der zum Teil auch die Probleme hat, die Du schilderst. Das Team bei Moxiecode besteht aus Experten auf diesem Gebiet, die seit Jahren an diesem Produkt weiterentwickeln. Aber selbst die müssen immer wieder an diesem Teil schrauben, um diverse Schönheitsfehler der diversen Browser auszubügeln.

Wie gesagt, ich achte Dein Unterfangen und will Dich nicht entmutigen. Aber ich weiß, welche Hürden und Ungemach auf Dich zukommen wird. Daher möchte ich Dich ein Bisschen davor schützen, zu sehr wertvolle Energie in eine höchst undankbare Aufgabe zu investieren!

Liebe Grüße,

Felix Riesterer.