rted: Rich Text Editor

SELF-Forum

Rich Text Editor

rted
– Informationen zu den Bewertungsregeln

Hallo,

da ich nicht mehr weiter wusste, dachte ich mir, dass ich mal in diesem Forum poste und hoffe, dass mir geholfen werden kann ...

Also: ich habe einen Rich Text Editor (WYSIWYG), der wunderbar unter MF und dem IE funktioniert. Er basiert auf der IFRAME-Technik (also ein iframe im contentEditable-Mode)!
Mit dem Editor kann man u.a. Links und Tabellen in das Dokument einfügen.

Doch dies reicht nicht. Denn wenn man z.B. eine Tabelle erstellt hat und mit Inhalt gefüllt hat und einem dann einfällt, dass diese Tabelle einen orangen Hintergrund haben soll, so müsste man die gesamte Tabelle neu erstellen (oder den HTML-Code ändern; doch das bleibt an dieser Stelle außen vor, da der Editor eine Erleichterung für nicht-versierte Nutzer ist bzw. sein soll).

Ich habe jedoch diesen Artikel gefunden, in dem Archiv!
Nach ein Paar Minuten rumprobieren mit getSelection und getRangeAt, hat dies auch geklappt und ich habe einige Ergebnisse erhalten.
Also habe ich mir Gedanken über das Problem gemacht und mir gedacht, dass ich irgendwie mit dieser Methode getSelection() und dem DOM-Baum der HTML-Seite arbeiten muss.

Doch wie ich dies tun muss weiß ich nicht. Daher frage ich hier nach und hoffe, dass mir geholfen werden kann.

Viele Grüße,
rted

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rich Text Editor

    Header
    – Informationen zu den Bewertungsregeln

    Hallo,

    Könnest du etwas von deinen Quelltext zeigen?

    MfG
    Header

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Rich Text Editor

      rted
      – Informationen zu den Bewertungsregeln

      Könnest du etwas von deinen Quelltext zeigen?

      Sicher, kommt gleich ..

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Rich Text Editor

      rted
      – Informationen zu den Bewertungsregeln

      Hallo,

      ersteinmal möchte ich mich entschuldigen für die etwas unübersichtliche Postingweise von mir! Das SelfHTML-Forum ist etwas anders als andere Foren!

      Nun zum Code! Hier ein Beispiel:

        
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<title>Rich Text Editor</title>  
<script type="text/javascript">  
function run_rte() {  
 var source = "<h1>Demo-Text</h1>Dies ist ein Demotext!<table id=\"table\" border=\"1\"><tr><td>1</td><td>2</td></tr></table><table id=\"table1\" border=\"1\"><tr><td>1.1</td><td>1.2</td></tr></table>";  
  
 if(document.all) { // IE  
  edit.document.body.innerHTML = source;  
 } else { // MF  
  document.getElementById('edit').contentWindow.document.designMode     = 'On';  
  document.getElementById('edit').contentWindow.document.body.innerHTML = source;  
 }  
  
 return;  
}  
function chg_color() {  
  
 // hier der Code zum Wechseln der Farbe  
 document.getElementById('edit').contentWindow.document.getElementById("table").style.backgroundColor = "#FF0000";  
}  
</script>  
</head>  
<body onLoad="run_rte();">  
  
<input type="button" value="Wechsele Tabellenfarbe" onclick="chg_color();" /><br/>  
<script language="JavaScript">  
area =  '<iframe name="edit" class="edit" id="edit" height="300px" '  
  + 'width="500px"></iframe>';  
  document.write(area);  
  if(document.all) { //IE  
   edit.document.designMode = 'On';  
  }  
</script>  
  
</body>  
</html>

      Also beim Klick auf den Button, wird die erste Tabelle gefärbt! Nun der Teil des Codes zum färben der Tabelle steht ja schon, doch nun muss man irgendwie noch die Position im DOM-Baum rausbekommen, um die Id der Tabelle zu erhalten. Dann kann man die Tabelle an der Cursorposition editieren!

      Wenn dies in etwa funktioniert könnte man sich dann einem Rechts-Klick-Menü zuwenden.

      Warum ich nicht einfach einen fertigen Editor nutze.
      Also dies hat drei Gründe:
      1.) Ich vertreibe den Editor (und das drumherum teilweise) komerziell und weiß nicht wie das bei diesen OpenSource Editoren ist!
      2.) Ich möchte es selber schaffen soetwas zu programmieren (wo ein Wille ist, ist auch ein Weg); außerdem muss der Editor nur wenige Funktionen beherschen.
      3.) Ich finde die anderen Editoren nicht so schön (Übersicht)! Außerdem hat mein System gewisse Vorgaben, die an den Editor gestellt werden, denen die "professionellen" Editoren nicht nachkommen können!

      Ich hoffe Ihr könnt dies verstehen!

      Danke,
      rted

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Rich Text Editor

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber rted,

    warum das Rad neu erfinden, wenn andere bereits eine hervorragende Lösung dafür haben?

    Ich benutze den TinyMCE von Moxiecode.com. Den kann man wunderbar an seine eigenen Bedürfnisse anpassen.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln