Online WYSIWYG Editor: Selber machen oder anpassen ?

[Tim C.]

Das Topic verrät eigentlich schon die Misere, in der ich stecke. Ich bin dabei ein größeres Homepage Projekt mit administrativem Backend zu erstellen. Auf dieser Content-Management-Ebene müssen natürlich auch Texte eingegeben werden können. Da ich bei der Zielgruppe des "CMS" nicht auf breite PC-Kenntnisse setzen kann, bietet sich meiner Meinung nach ein online-WYSIWYG Editor an, der von Buttons und Layout an MS-Word angelehnt ist.

Jetzt stellt sich mir die Frage:
- Soll ich sowas selber coden, wenn ja, gibt es dazu Tutorials
- oder reicht es eigentlich völlig aus, einen bestehenden Freeware Editor, z.B. FCKEditor anzupassen ?

 

[Daniel Mannheimer]

Kommt drauf an, was damit gemacht werden soll. Gerade wenn die PC-Kenntnisse nicht so doll sind würd ich zu einem minimalen Editor raten. Der "Normalmensch" ist mit der Flut an Funktionen schnell überfordert.

 

[Fabian H]

Ich kenn jetzt den Umfang von FCKEditor nicht, aber grundsätzlich sollte es nicht allzuviel Aufwand sein, selber einen zu machen.
Es spricht allerdings auch nichts dagegen, einen anderen zu modifizieren.
Im Endeffekt musst du es wissen, ob du dir die Arbeit machen willst, oder nicht.

Ich hab letztens auch mal einen etwas kleineren gemacht. Siehe Anhang. (HTML-Quelltext und Schriftart gehen nicht, weil die per Adminpanner verwaltet werden)

//Edit: Ach ja: richeditcall.html nicht richedit.html aufrufen

 

[Thomas Lindner]

Hier ne Variante von mir, noch nicht ganz fertig und auch nicht die aktuelleste Version!

Wird noch verbessert und beendet:


http://www.formularersteller.de/temp/testen_bitte.html


(Habe ich auch für ein CMS (News-System administrieren begonnen)!

 

[Tim C.]

Danke für diesen ersten kleinen Einstieg. Also die Funktionen die ich brauchen werde sind, hoch-/tiefstellen, durchstreichen, kopieren/einfügen (man kann nicht davon ausgehen, dass die Zielgruppe Strg+C / Strg+V kennt), Bild einfügen (mit gekoppeltem Upload), Tabellen einfügen. Das war es eigentlich auch schon, da das ganze dann trotzdem noch in eine Art Template geladen wird, möchte ich dem User keinen Einfluss auf Farbe, Schriftgröße, Textausrichtung usw geben.

Die Lösung von Thomas wäre wohl am einfachsten umzusetzen von meiner Seite, jedoch wäre damit der Endnutzer wahrscheinlich schon wieder überfordert.

Was mich ausserdem an FCKEdit ärgert, ist dass es auf großgeschriebene deprecated html Tags zurückgreift à la <FONT>. Das hätte ich halt gerne valide.

Nuinmundo ? Deime Ansätze, wo hast du die hergeholt ? Javascript-Kenntnis ? oder irgendein Tutorial ? Naja ich werde mal deine ~600 zeilen code durchwuseln, ob ich draus schlau werden.

 

[Fabian H]

Wie, 600 Zeilen sind das schon?
Naja, das eigentlich wichtige ist die Funktion cEdit, bzw alles was in der JS-Datei vor den Klasen kommt.

menu.Addpoint("Linksbündig", "cEdit('JustifyLeft');");

In der Zeile ist z.B. alles, bis auf den zweiten Parameter der Funktion uninterresant für die eigentliche Funktion.

Tutorials: Hm, nicht direkt. Hab diese WYSIWYG Funktinalität des IE vor längerer Zeit mal irgendwo im Internet gesehen.
Seit dem mach ich ab und zu auch mal selber kleinere Editoren.
Was noch wichtig war/ist: die MSDN Library. Da stehen alle wichtigen Funkltionen von JScript drin.
Das ganze Ding ist auch für ein CMS.
Die Klassen sind letztendlich nur spielereien. Ich wollte einfach mal die Klassen in JavaScript ausprobieren und da der Code zum Aufbau des Fensters sowieso total unübersichtlich war, hab ich die eingebaut.
(Seit dem weiss ich: Es gibt keine Sprache, in der Klassen schlechter implementiert sind, als JavaScript )

Ach ja, ganz wichtig: http://webfx.eae.net (ich glaub, da hab ich das Richedit-Ding zum ersten mal gesehen)


//edit:

Was mich ausserdem an FCKEdit ärgert, ist dass es auf großgeschriebene deprecated html Tags zurückgreift à la <FONT>. Das hätte ich halt gerne valide.

Das ist halt die Microsoft Engine.
Wenn du die umgehen willst, na dann viel Spass...
bzw: Es kommt drauf an, wie du komplex du es haben willst, aber es muss ja z.b. schon geprüft werden, ob das jeweilige Element schon innerhalb des Tags ist, bzw ob Teile des Markierten Textes darin sind. Und das Gross-schreiben wirst du so gut wie gar nicht umgehen können. Es seii denn, du findest eine Lösung, mit der du in normale Divs schreiben kannst

 

[Andreas Gaisbauer]

Hallo Tim,

auf jeden Fall selber schreiben, schon allein des spaßes wegen . Hab noch 3 Links für dich:

http://www.devarticles.com/art/1/90 - Sehr schönes Tutorial
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/editing/tutorials/html_editor.asp weiteres Tutorial
http://www.bris.ac.uk/is/projects/cms/ttw/ttw.html - Die "Marktübersicht"

Interessant ist auch die Tatsache, dass das ganze nicht mehr IE only sein muss (opera unterstützts trotzdem nicht).

ok, dann viel spass beim schreiben


ciao

PS:
@Nuinmundo

(Seit dem weiss ich: Es gibt keine Sprache, in der Klassen schlechter implementiert sind, als JavaScript )

wie wahr wird/sollte sich aber mit Javascript 2.0 endlich bessern -> http://www.mozilla.org/js/language/js20.html

 

[Tim C.]

Ok habe jetzt das Tutorial von devarticles mal durchgearbeitet und gebe mich jetzt gleich daran mal anzufangen, sobald ich mir irgendwie klargemacht habe, wie ich den HTML Code in eine PHP-Variable bekomme.
In dem Tutorial ist nämlich nur irgendwas mit ASP beschrieben.

Naja ich denke ich lass den ganzen Code dann durch ein paar preg_replace laufen a) um dieses permanente TAG Großgeschreibe zu umgehen b) um z.B. lange Tags wie <strong> durch kürzere wie <b> zu ersetzen.

Naja danke für die Hilfe, ich meld mich wenn hakt

 

[js-mueller]

Hab mal ne Frage. Ist in den Tutorials erklärt wie auch für andere Browser geht?
Das würde mich nämlich am meisten interessieren.
Ich wollt mir jetzt nicht das ganze durchlesen um dann mittendrin zu merken das es net geht ;-)

 

[Tim C.]

Also die Lösung von devarticles läuft nur unter Internet Explorer.