Javascript Rich-Text-Editors

Question

Es gibt mehrere (sehr gut) Rich-Text-Web-Editoren in Javascript geschrieben (zB FCKeditor, YUI Texteditor und viele viele andere).

Allerdings konnte ich keine Anleitung finden, wie man eine solche Komponente zu bauen. Etwas, das sowohl auf hoher Ebene Überlegungen erklären würde (Architektur) und / oder weitere Informationen in Low-Level „kritischen“ Punkte (also warum tun die meisten der Editoren gibt, iFrame verwenden, wie gehen Sie mit Tastatureingabe wie Strg-B, Strg -C, wenn der Text ausgewählt ist, und wenn es nicht usw.)

Meine Hauptmotivation ist die Neugier; wenn ich heute so einen Editor zu entwickeln hätte, würde ich nicht wissen, wo aus zu starten.

Kennt jemand eine Anleitung, die die oben genannten Probleme abdeckt (im Idealfall etwas, das erklärt, wie ein WYSIWYG-Editor von Grund auf neu bauen)?

Answer 1

Nach mehr Forschung fand ich folgende. Die Funktionalität für den Aufbau eines Rich-Text-Editor ist bereits im Browser implementiert. IE war das erste, eine solche API erstellen und Firefox repliziert es.

Übersicht

Der wichtigste Punkt ist, dass das Javascript-Objekt „Dokument“ eine Eigenschaft namens designmode hat, die eingestellt werden kann, um „on“. Dieser wandelt die ganze Seite auf einen Textbereich artige Komponente. Stellen Sie sich vor, dass der Browser die Seite auf die gleiche Weise öffnet, dass MS-Word würde. Der Benutzer die Formatierung sehen können, aber er kann die Seite auch eingeben (in der Regel öffnet der Browser eine Seite als Nur-Lese)

window.document.designMode = "On";

Da über das wirkt sich auf alle Web-Seite verwenden die meisten Editoren iFrames, so dass der bearbeitbaren Bereich nur die iFrame ist, die eine eigene Dokument-Objekt hat.

Obendrein gibt es eine API, die leicht Javascript Zugang zu Styling ermöglicht. Dies wird ausgesetzt, um die execCommand () -Methode werfen. Zum Beispiel können Sie aus Javascript aufrufen

document.execCommand('bold', false, '');

und der ausgewählte Text wird fett geworden.

Tutorien

Ich habe folgendes gefunden:

Ein kurzer Schritt für Schritt Führung .

Ein mozilla Führung . Es hat die bequemste API-Referenz ich gefunden habe und auch einige weitere Links.

Ein Leitfaden von microsoft .

Answer 2

Nutzen Sie Ihre Neugier, Sie zu motivieren, um nur den Quellcode in einem Editor zu öffnen und starten zu erkunden. Da diese Editoren in JavaScript geschrieben werden, sind die Antworten für die Suche frei.

Ich weiß, Sie suchen nach etwas leichter verdaulich, aber das Lesen der Quellcode sehr lohnend sein kann.

Starten Sie einen Editor bauen könnte so einfach sein wie eine bestehende Open-Source-Editor nehmen und ändern es Ihren eigenen speziellen Bedürfnissen gerecht zu werden.