WYSIWYG Editor - selbst gemacht.


mR.fLopPy

Erfahrenes Mitglied
Hallo Leute!

Wie der Titel bereits verrät versuche ich mich daran einen simplen WYSIWYG Editor zu bauen. Ich habe bereits zahlreiche Beiträge gelesen, bin auf viele nützliche (und weniger nützliche) Informationen gestoßen.

Zunächst einmal möchte ich mal grob die Spezifikationen für den Editor festlegen.

Funktionsumfang:
  • B,I,U
  • Linksbündig, Zentriert, Rechtsbündig
  • Link einfügen
  • Bild einfügen

Kompatibilität:
  • Firefox 3
  • IE 8 (wenn alles im FF funktioniert)

Technologien zur Umsetzung: (inkl. mein Wissensstand)
  • PHP 5 (Befriedigend)
  • JavaScript (Genügend)
  • HTML (Gut)
  • CSS (Gut)

Sonstiges:
Der Text soll zunächst im Editor-Fenster editiert werden können und zunächst per Knopfdruck in einem neuen Fenster als HTML Text dargestellt werden. Das dient anfangs zu Testzwecken, denn später soll dieser Text in eine MySQL DB gespeichert werden und in Form von "Newseinträgen" dargestellt werden.

---

In dem Beitrag wysiwyg-editor-selber-bauen-ueberlegt-mit ist mir von dem Benutzer "con-f-use" der Editor aufgefallen den er gebastelt hat. Laut seiner Aussage verwendet er zur Formatierung (welche erstaunlicherweise anstandslos funktioniert in FF und IE) die Standard-Browserfunktionen.
Das hat mich zunächst mal ein wenig verwirrt, aber allen anschein nach unterstützt JavaScript bereits Funktionen zur Formatierung von Text.

(Editor von Con-f-use)

Jetzt stellt sich mir die Frage wie ich an diese Thematik am besten heran gehe. Ich habe mir bereits einige Gedanken gemacht und einen zunächst wesentlich komplexeren Schritt in betracht gezogen wo man unzählige abfragen machen müsste nur um einen Text "Fett" darzustellen.

(zB. ist der Text markiert, wurde der Text bereits Fett hervorgehoben, uvm. ...)

Wie gesagt bei con-f-use seiner Methode scheint dies bereits alles berücksichtigt zu werden. Das Problem ist nur dass ich nicht weiß ob beim Speichern von diesem Text auch dann die ganzen HTML-Tags mitgeliefert werden.

Weiters stelle ich mir die Frage inwiefern der Aufwand eines WYSIWYG Editors zu einem Editor ist, welcher Pseudo-Tags verwendet und später in HTML Tags umwandelt (ähnlich diesem Editor).

In Anlehnung an die Frage zuvor, würde ich auch gerne wissen ob es besser ist HTML Tags in eine Datenbank zu schreiben oder Pseudo-Tags.

Wenn jemand auch recht gute Online-Lektüre zu diesem Thema hat, würde ich nicht nein sagen.

Freundliche Grüße
floppy
 

RudolfG

Erfahrenes Mitglied
Also wenn diese Aufgabe nur als Übungszweck zur Einarbeitung/Vertiefung in die von dir genannten Sprachen zu sehen ist, dann ist soweit alles klar, anderseits würde ich mir nicht die Mühe machen und eins selber zu entwickeln.

Es gibt duzende WYSIWYG und einige besonders Leistungsstarke allem voran TinyMCE! Diese haben den Vorteil, dass sie regelmäßig an die Browser und Ihre "Macken" angepasst werden und wegen der riesen Mengen an Benutzer sicher sehr robust laufen. Zumindest mehr als man es selber schaft!

Weiters stelle ich mir die Frage inwiefern der Aufwand eines WYSIWYG Editors zu einem Editor ist, welcher Pseudo-Tags verwendet und später in HTML Tags umwandelt (ähnlich diesem Editor).

In Anlehnung an die Frage zuvor, würde ich auch gerne wissen ob es besser ist HTML Tags in eine Datenbank zu schreiben oder Pseudo-Tags.

Hier hat das Benutzen und Speichern von HTML einige wesentliche Vorteile:
- Standatisiert (benötigt um es anzuzeigen nur einfach einen Browser und muss nicht durch ein "Tool" vorher in HTML für den Browser aufbereitet werden.)
- Sehr große Gestalltungsmöglichkeiten von HTML/CSS etc.

Möchtest du die Möglichkeiten der Formatierung sehr stark beschränken, empfiehlt es sich Tags zu nehmen, da du hier nur die gültigen/erlaubten in HTML übersetzen kannst und alle andere einfach ignorierst.

Gruß
RudolfG
 

mR.fLopPy

Erfahrenes Mitglied
Hallo Rudolf,
und danke für deine Antwort. Ich würde sagen sowohl als auch. Es dient vorwiegend zu Übungszwecken und erhoffe mir dadurch auch ein grobes Verständnis für die Funktionsweisen. Mein Grundgedanke war es dann einen bestehenden Editor nach meinen wünschen anzupassen um diesen dann später einsetzen zu können.

Wie der Zufall (oder auch nicht?) es so wollte hatte ich zunächst auf TinyMCE ein Auge geworfen. Später wäre es nämlich darum gegangen wie man diesen am besten konfiguriert. Soweit wollte ich allerdings zunächst nicht vorgreifen, weil ich mich leider noch nicht so gut auskenne mit Editoren.

Falls du oder sonst irgendjemand etwas gutes zum Einlesen hat wäre ich dankbar.
 

RudolfG

Erfahrenes Mitglied