Ich versuche einen Online-Editor (wie FCKEditor / etc) zu entwickeln, aber ich habe keine Ahnung, wie sie funktionieren. Ich weiß, dass die WYSIWYGs Javascript und IFrames haben, aber wie funktionieren sie eigentlich?
Ich bin besonders neugierig auf eine Echtzeit-Vorschau dessen, was in den Editor eingegeben wird.
RTE wird normalerweise (immer?) mit einem iframe implementiert. Für das Dokumentobjekt, das in diesem Iframe verfügbar ist, muss die Eigenschaft designMode aktiviert sein . Danach müssen Sie nur noch die grundlegenden Funktionen wie fett, kursiv, Farbe, Hintergrund usw. implementieren, indem Sie die Methode execCommand des Dokumentobjekts verwenden.
Der Hauptgrund für die Verwendung eines iFrames ist, dass Sie den Fokus der Auswahl nicht verlieren, wenn Sie auf Stilschaltflächen klicken (Firefox erlaubt das Festlegen dieser Eigenschaft nur für iFrames). Außerdem ist das Attribut contentEditable in Firefox-Versionen vor 3 nicht verfügbar.
Die Dinge werden etwas komplizierter, wenn Sie mit dieser RTE etwas Besonderes machen wollen. An diesem Punkt müssen Sie Bereichsobjekte verwenden (die in den verschiedenen Browsern unterschiedlich implementiert sind).
FCKEditor ist Open Source und der Quellcode ist frei verfügbar.
Der Code für den Editor , der für Stackoverflow verwendet wird ist auch verfügbar
Es könnte sich lohnen, etwas Zeit mit dem Lesen des Quellcodes zu verbringen. Die Leute hier wären froh, wenn sie helfen könnten, irgendwelche Codes zu erklären, die unklar waren.
Ich glaube, dass der Schlüssel zu WYSIWYG-Editoren das contenteditable Attribut ist ( das kann für jedes HTML-Tag gelten, aber vermutlich so etwas wie ein div in diesem Fall). Der Rest der Funktionalität wird typischerweise von Javascript bereitgestellt, das auf das DOM zugreift und das HTML manipuliert. In Bezug auf die Vorschau-Funktion ist dies wahrscheinlich nur eine Sache des Anhängens des Ereignisses, das ausgelöst wird, wenn das Element vom Benutzer bearbeitet wird und dann seinen HTML-Code holt und an anderer Stelle auf der Seite mit relativ einfachem Javascript anzeigt.
Update: Wenn Sie nur einen Editor benötigen, schlage ich vor, dass Sie einen der anderen Vorschläge verwenden, die die Leute hier gegeben haben. Aber wenn Sie einen akademischen Zweck haben, um dies zu bauen, wird das folgende ein Sprungbrett sein.
Dies ist relativ einfach (einige Teile). Zum Beispiel könnten Sie jQuery verwenden, um schnell zu starten.
%Vor%Nun, da wir Markup und Stile an Ort und Stelle haben, können wir einige einfache Javascript hinzufügen, um Echtzeit-Previews auszulösen.
%Vor%Dies ist ein sehr primitives und einfaches Beispiel, aber es wird Ihnen helfen.
Ich habe vor etwa anderthalb Jahren ein Open-Source-Projekt "sourceforge" gestartet, um einen Rich-Text-Editor zu erstellen. Ich habe nie herausgefunden, wie ich meinen Code dort hinbekomme, aber um ihn zu entwickeln, musste ich recherchieren, wie der "editierbare Editiermodus" in IE und Firefox funktioniert. Meine Recherche beinhaltete hauptsächlich die Firefox-Website und die Microsoft-Website.
Der Code, den ich sah, um das zu tun, war hässlich und nicht sehr freundlich (Entschuldigung, ich bin ein Objektfotot, ich kann nicht anders), also brauchte ich eine Menge Re-Factoring, um in eine Form zu kommen, die ich könnte sich entwickeln und erweitern.
Selbst wenn Sie die Funktionalität des "editierbaren Inhaltsmodus" des Browsers befolgen, werden Sie trotzdem immer noch einen Editor haben, der voller Fehler ist. Der Grund dafür ist, dass der "editierbare Editiermodus" nicht konsistent mit dem Einfügen von MS Word funktioniert (jeder versucht dies) oder das Erstellen von nummerierten Listen, und das von ihm erzeugte Markup ist inkonsistent und schlecht gebildet.
Deshalb verwende ich jetzt TinyMCE . TinyMCE ist voll von Design-Entscheidungen, die ich persönlich vermieden hätte, aber sie haben die Mehrheit der Fehler behoben, die Sie bekommen, wenn Sie versuchen, Ihren eigenen Editor zu erstellen. Es ist auch voll von Funktionen, mit denen Sie es an Ihre Bedürfnisse anpassen können.
Ich kann nichts anderes empfehlen, weil ich die Alternativen nicht wirklich ausprobiert habe.
Obwohl TinyMCE die beste Option zu sein scheint, ist es immer noch ein Problem für mich, weil das Einfügen von Word-Dokumenten immer noch unvorhersehbar ist. Das WYSIWYG-Versprechen ist in HTML nicht wirklich möglich, aber der Kunde erwartet es, und es gibt viele Probleme, die schleichen Sobald Sie beginnen, lassen Sie Benutzer rohes HTML in Ihre Datenbank setzen. (vor allem, wenn Ihre Codebasis Teile hat, die zuletzt 1993 aktualisiert wurden ...)
Tags und Links javascript wysiwyg editor fckeditor