WYSIWYG-Editor selber bauen - überlegt mit!

Interessant!

Also der TinyMCE scheint ja wirklich ein abartig komplexes Ding zu sein, da wird einem schwindelig wenn man an den Entwicklungsaufwand denkt ;) Das muss ja unzählige Entwickler-Jahre gekostet haben.

Aber ich muss auch zugeben der TinyMCE ist durchaus praxistauglich, denn man kann mit einem Brush den Spaghetti-Code aufräumen. Jetzt muss nur noch jemand so schlau sein und die Funktion dieses Brushes automatisch ausführen wenn man das Formular submittet.

Mein Ansatz wäre gewesen das der Code auf 2 Ebenen verwaltet wird: Einmal im Rohformat; Jedes Zeichen ein Objekt vom Datentyp Editor-Content (selbst gebastelter Datentyp), welcher entsprechende Style-Eigenschaften besitzt. So kann ein Element eine Style-Eigenschaft nur einmal haben, nicht x-fach. Es wird also im Zweifelsfall immer die Style-Eigenschaft des markierten Objektes verändert. Daraus entsteht für den Wisywyg ein riesiger Spaghetti-Code, denn jedes Zeichen steht in einem eigenen SPAN-Tag mit Style-Angaben. Is ja nur für den Editor.

Im zweiten Schritt geht ein Parser durch und setzt alle Objekteigenschaften auf NULL, die im vorangegangenen Objekt definiert waren (dazu muss das vorangegeangene natürlich gecached werden). Im dritten Schritt erhalten dann nur noch diejenigen Objekte ein öffnendes SPAN-Tag mit Style-Angaben vorangestellt, welche selbst Style-Eigenschaften != NULL besitzen. Beim ersten wieder vorkommenden Objekt mit Style-Eigenschaften != NULL wird VOR dem Objekt das SPAN-Tag geschlossen und ein neues auf gemacht, mit den entsprechenden Style-Eigenschaften dieses Objektes. Und immer so weiter. Das Ergebnis: Der Code sieht so aus, wie er aussehen soll, nichts wird hundertfach verschachtelt.

Das *sollte* funktionieren ;) Aber TinyMCE macht mir Angst. Das Ding ist nahezu perfekt! Allerdings brauche ich auch wirklich nur:

- B / I / K Formatierung
- Liste
- Link
- CODE einfügen
- H1 - H7 (Überschriften)
- ENTER = P; Absatz
- ENTER + SHIFT = BR; Zeilenumbruch
- Wiederherstellen / Rückgängig

TinyMCE kann ja fast so viel wie Word. Der Name täuscht ;)

Für's Web finde ich es aber fatal in einem WYSIWYG so kram wie Schriftarten, Schriftgröße usw. anzubieten. Das geht gegen jede Usability-Regel, verschiedene Schriftarten zu mixen; Und die Schriftgröße sollte die Website festlegen, welche den Text unterbringt. Geschmackssache :)

Ist TinyMCE irgendwo dokumentiert, also vom Code her? Mich interessieren da echt nur die Basics, sozusagen der Farbcode vom Space-Shuttle, nicht die Schaltpläne für das Innenleben.

TinyMCE ist so ziemlich das komplexeste JavaScript das ich bisher gesehen habe, und noch dazu das beeindruckendste!

Gruß
Laura
 
Aber ich muss auch zugeben der TinyMCE ist durchaus praxistauglich, denn man kann mit einem Brush den Spaghetti-Code aufräumen. Jetzt muss nur noch jemand so schlau sein und die Funktion dieses Brushes automatisch ausführen wenn man das Formular submittet.
Das sollte eigentlich ohnehin schon passieren. Zumindest entnehme ich das dem TinyMCE-Beispiel (einfach mal wild rumformatieren und dann auf „Submit“ klicken und den sauberen HTML-Code bestaunen).

Das *sollte* funktionieren ;) Aber TinyMCE macht mir Angst. Das Ding ist nahezu perfekt! Allerdings brauche ich auch wirklich nur:

- B / I / K Formatierung
- Liste
- Link
- CODE einfügen
- H1 - H7 (Überschriften)
- ENTER = P; Absatz
- ENTER + SHIFT = BR; Zeilenumbruch
- Wiederherstellen / Rückgängig

TinyMCE kann ja fast so viel wie Word. Der Name täuscht ;)

Für's Web finde ich es aber fatal in einem WYSIWYG so kram wie Schriftarten, Schriftgröße usw. anzubieten. Das geht gegen jede Usability-Regel, verschiedene Schriftarten zu mixen; Und die Schriftgröße sollte die Website festlegen, welche den Text unterbringt. Geschmackssache :)
TinyMCE ist nicht nur mächtig, sondern auch sehr flexibel. Schau dir mal die Minimal-Beispiele an, das sollte schon in die richtige Richtung gehen. Wie man diese Anpassungen vornimmt, steht in der von Felix schon verlinkten Dokumentation. Also kein Grund, das Rad neu zu erfinden :)

Grüße,
Matthias
 
@Felix: Yeay, Maddox!

@Laura: Ich war jetzt zu faul den ganzen Text meiner Vorredner zu lesen, daher sorry, wenn du schon ganz wo anders bist. Das vorweg nun zum eigentlich Teil:
Ich hab mich mal ein klein wenig mit WYSIWYG beschäftigt und dabei ist dieses Beispiel herausgekommen. Ist wenig Code, was den Vorteil hat das der Editor im Gegensatz zu MFC, MCE und Konsorten überschaubar ist. Andererseits wurde auf wenig Browser rücksicht genommen und er ist nicht so ganz ausgereift. Aber das Prinzip sollte verständlich rübergebracht sein.
Vielleicht hilft's dir ja weiter, wer weiß?

Ich für meinen Teil ab die Erfahrung gemacht, dass wegen einer fehlenden Standardisierung es sehr mühsam ist sowas selbst zu schreiben v.A. wenn am Ende kein Codealptraum von dem Editor erzeugt werden soll. Hilfreich war die Dokumentation vom IE bzw. dem Mozilla dabei.
 
Hey ich habe da mal eine frage. Was nutz man mehr iframe mit designMode oder das div mit contenteditable.


Das würde mich mal intressieren. Vielen dank.
 

Neue Beiträge

Zurück