Entwicklertools · HTML-WYSIWYG-Editor
Wie ein WYSIWYG-Editor Formatierungen in HTML umwandelt: contenteditable Erklärt
· Wie es funktioniert
html inhaltsbearbeitbar Entwickler-Workflow
Erklärt das contenteditable-Attribut, das jedes Element bearbeitbar macht, wie der Browser das DOM während der Eingabe und Formatierung verändert und wie dieses DOM zu dem HTML wird, das Sie herauskopieren.
Du hast fett gedrückt; Woher kam der <strong>? – öffnet sich mit der Lücke zwischen dem Klicken auf eine Schaltfläche und dem Anzeigen des Markups
Eine Symbolleistenschaltfläche mit der Bezeichnung „Fett“ fühlt sich an wie ein Pinsel, aber der Browser muss das Ergebnis in einem Dokumentbaum darstellen. Eine ausgewählte Phrase kann je nach Bearbeitungsbefehl und Engine zu einem <b>- oder <strong>-Element werden. Die Aufgabe des Entwicklers besteht darin, diese browserspezifischen Mutationen in HTML umzuwandeln, das eine andere Seite lesen kann, ohne jedes Tag oder gefährliche Attribut zu akzeptieren. Was Sie auf dem Bildschirm sehen, ist ein bearbeitbares DOM, keine Textverarbeitungsdatei mit einer unabhängigen Formatierungsebene.
contenteditable: das Attribut, das eine Seite bearbeitbar macht – erklärt den Bearbeitungshost, die Platzierung des Einfügezeichens und wie der Browser das Bearbeitungsverhalten steuert
contenteditable="true" macht ein Element zu einem Bearbeitungshost. Der Browser verwaltet das Bewegen, Auswählen, Einfügen und Löschen von Cursorn, mit einem DOM-Baum darunter. Die Bearbeitungsoberfläche von ToolAcre nutzt diese Browserfunktion und stellt sowohl den visuellen Modus als auch den Quellmodus zur Verfügung; Der Inhalt bleibt auf der Seite und wird nicht an einen Rich-Text-Server übermittelt. Ein Einfügeereignis erhält gesonderte Aufmerksamkeit, da eingefügtes HTML Elemente und Attribute enthalten kann, die nicht ungeprüft in ein vertrauenswürdiges Dokument eingefügt werden dürfen.
Jeder Tastendruck ist eine DOM-Mutation – beschreibt das Wachsen von Textknoten, das Umbrechen und Teilen von Elementen und warum sich der Baum ändert, selbst wenn der Text unverändert aussieht
Durch die Eingabe werden Textknoten erstellt oder erweitert. Durch Drücken der Eingabetaste kann ein Block geteilt werden. Wenn Sie eine Auswahl fett formatieren, wird ein Bereich umbrochen. Es ist nicht garantiert, dass der genaue DOM nach zwei Klicks mit der vom Entwickler vorgestellten Zeichenfolge <strong> übereinstimmt: Browser wählen unterschiedliche Elemente und Verschachtelungen aus. ToolAcre verwendet derzeit document.execCommand zur Formatierung. Diese API ist veraltet, aber es gibt hier keinen einheitlich implementierten Drop-in-Ersatz für jeden Bearbeitungsvorgang, sodass der Editor seine Ausgabe als nicht vertrauenswürdige Eingabe behandelt, die normalisiert werden muss, und nicht als kanonisches Markup.
Vom Live-DOM zum HTML-String – erklärt die Serialisierung des bearbeiteten Baums in Markup, das Sie kopieren können
Um HTML zu kopieren, liest der Editor das innerHTML der Bearbeitungsoberfläche und leitet die resultierende Zeichenfolge durch eine Element-/Attribut-Zulassungsliste. Tags wie b werden auf semantisch stark normalisiert; Zulässige Links werden auf akzeptable URL-Schemata überprüft, während Ereignishandler und nicht verwandte Attribute entfernt werden. Auch der Quellmodus durchläuft seinen Text durch denselben Filter, bevor er wieder in die visuelle Oberfläche eingefügt wird. Dies ist ein editorspezifischer Bereinigungspfad und kein allgemeiner serverseitiger HTML-Bereinigungspfad für schädliche Inhalte von beliebigen Benutzern.
Ausgearbeitetes Beispiel: eine aus zwei Absätzen bestehende Notiz mit einer fett gedruckten Phrase – folgt dem DOM durch Eingabe, Auswahl und Fettdruck und zeigt dann das resultierende Markup an
Geben Sie zwei Absätze ein – „Projektaktualisierung“ und „Entwurf bereit“ – wählen Sie dann im zweiten „Entwurf“ aus und drücken Sie Fett. Ein Browser kann <b>Draft</b> in das Live-DOM einfügen. Beim Wechsel in den Quellmodus durchläuft es den Sanitizer von ToolAcre, der nach der Normalisierung <strong>Draft</strong> innerhalb seines Absatzes ausgeben kann. Versuchen Sie es mit einer eingefügten <img onerror="...">-Nutzlast in einem Wegwerfdokument: Die Ausgabe-Zulassungsliste enthält keine Bilder oder Ereignishandlerattribute. Das Beispiel veranschaulicht, warum Sie das resultierende Markup überprüfen, anstatt davon auszugehen, dass ein Klick eine universelle HTML-Darstellung hat.
Warum dieselben Aktionen in verschiedenen Browsern unterschiedliche Markups ergeben – behandelt das browserspezifische Bearbeitungsverhalten und warum Editoren ihre Ausgabe normalisieren
Verschiedene Browser implementieren Bearbeitungsbefehle, Zeilenumbrüche und Auswahlgrenzen unterschiedlich. Sogar identische sichtbare Absätze können mit unterschiedlichen verschachtelten Spannen oder Blockelementen serialisiert werden. Der Normalisierungsschritt verringert einige Unterschiede, macht eine WYSIWYG-Oberfläche jedoch nicht zu einem durch Standards garantierten Serialisierer. ToolAcre zeigt die Quelle neben dem visuellen Ergebnis an, sodass Sie ungerade Verschachtelungen korrigieren können. Seine Vorschau läuft in einem Iframe mit einem Sandbox-Attribut, das keine Skriptausführung zulässt, wodurch die Auswirkungen begrenzt werden, wenn ein unsicheres Fragment diese Vorschau erreicht.
Was dies nicht abdeckt – kollaboratives Bearbeiten, Undo-Stacks und vollständige Editor-Frameworks liegen außerhalb des Geltungsbereichs
Diese Seite verspricht keine gemeinsame Bearbeitung, einen vollständigen Rückgängig-Verlauf, einen ausgefeilten E-Mail-Client oder ein vollständiges Editor-Framework. Contenteditable kann nicht allein entscheiden, welches Markup ein CMS eines Drittanbieters akzeptiert, und eine stringbasierte Zulassungsliste ist kein Ersatz für eine serverseitige HTML5-Parser-Bereinigung, mit der nicht vertrauenswürdige Benutzer Inhalte übermitteln können. Die Sandbox-Vorschau ist ein von der Bereinigungsausgabe getrennter Schutz; Weder macht es beliebiges JavaScript noch feindliche URLs in jedem Ziel sicher.
Fazit: Der Editor ist ein DOM, das Sie sehen können – fasst den Mechanismus und die Art und Weise zusammen, wie der HTML-WYSIWYG-Editor von ToolAcre das von Ihrer Formatierung erzeugte Markup verfügbar macht, ohne den Browser zu verlassen
Der Editor ist ein DOM, das Sie sehen und überprüfen können. Der HTML-WYSIWYG-Editor von ToolAcre bietet Ihnen eine direkte Möglichkeit, eine visuelle Formatierungsaktion lokal in Ihrem Browser mit dem gefilterten HTML zu vergleichen, das sie erzeugt. Geben Sie eine Wegwerfnotiz ein und fetten Sie sie ein, wechseln Sie in den Quellmodus und behalten Sie nur die Elemente bei, die Ihr Ziel tatsächlich unterstützt.