Entwicklertools · HTML-WYSIWYG-Editor
Was passiert, wenn Sie aus Word oder Google Docs in einen Web-Editor einfügen?
· Wie es funktioniert
html inhaltsbearbeitbar Textbereinigung
Erklärt, was Rich-Text-Einfügungen enthalten, von MSO-Stilen bis hin zu Wrapper-Elementen und Schriftartenstapeln, und zeigt, wie Sie das resultierende Markup lesen, bevor es Ihre Website erreicht.
In Word sah es gut aus – wird mit einem eingefügten Artikel geöffnet, dessen Abstände und Schriftarten im Widerspruch zum Website-Design stehen
Ein aus einem Textverarbeitungsprogramm kopierter Absatz kann an der Quelle poliert aussehen und Schriftarten, Abstände und Umbrüche aufweisen, die mit einer Website in Konflikt stehen. ToolAcre behält diese Präsentation nicht vollständig bei. Sein Paste-Listener fängt den Vorgang ab, bevor das ursprüngliche Rich-Markup eingefügt wird, und wählt stattdessen eine gefilterte Darstellung.
Der wichtige Beweis ist die Sicht auf die Quelle und nicht, ob der erste visuelle Eindruck dem Originaldokument ähnelt. Der Editor ist bewusst eng gehalten: Überschriften, Absätze, Hervorhebungen, Listen, Zitate, codeähnliche Elemente und Links können überleben, während Layout-Container, Klassennamen, IDs und Inline-Stilattribute nicht zu seinem Ausgabevertrag gehören.
Die Zwischenablage enthält mehr als nur Text – erklärt, dass eine Rich-Text-Kopie neben reinem Text auch eine HTML-Variante enthält
Eine Zwischenablage kann `text/html` und `text/plain` für einen Kopiervorgang verfügbar machen. Der Hundeführer verlangt beides. Wenn eine HTML-Nutzlast vorhanden ist, wird diese Zeichenfolge bereinigt und das umgeschriebene Fragment mit `insertHTML` eingefügt; Nur wenn Rich HTML fehlt, wird die einfache Nutzlast mit `insertText` eingefügt.
Dieser Vorrang ist für dieses Panel durch Codes bestätigt und keine universelle Aussage für jede Anwendung. Dies erklärt, warum eine reichhaltige Paste eine Liste behalten kann, während sie ihr Aussehen verliert. Die Quellanwendung hat den HTML-Code der Zwischenablage geschrieben, aber die Zulassungsliste von ToolAcre entscheidet, welcher Teil zur bearbeitbaren Oberfläche zugelassen wird.
Was dieser Editor aus Rich Paste entfernt: nicht unterstützte Elemente, Attribute und Kommentare
Nicht unterstützte Elemente werden auf zwei Arten behandelt. Unbekannte gewöhnliche Wrapper werden entpackt, sodass ihre Wörter erhalten bleiben, während Skript-, Stil-, Iframe-, Formular-, SVG-, MathML- und andere riskante oder Nicht-Editor-Container zusammen mit ihrem Inhalt entfernt werden. Kommentare und Dokumenttypen werden ebenfalls verworfen und nicht in den Entwurf übernommen.
Attribute stehen vor einem zweiten Tor. Klasse, ID, Stil, Datenattribute und alle Event-Handler werden entfernt, da zulässige Attribute pro Element benannt werden. Dies bedeutet, dass quellenspezifische Klassennamen und Inline-Präsentationen das Ziel-Stylesheet nicht bekämpfen können, nachdem ToolAcre die Einfügung gefiltert hat, obwohl möglicherweise auch nützliche Quellenstile verschwinden.
Warum quellenspezifische Wrapper und Stile die Zulassungsliste nicht überleben
Das Repository stellt keine erfassten Word- oder Google Docs-Fixtures bereit, daher erfindet dieser Artikel keine genauen `mso-`-Klassen, internen IDs oder Wrapper-Sequenzen für bestimmte Versionen. Es kann die durch die Zulassungsliste nachgewiesene Konsequenz angeben: Klassen und Stile werden entfernt, unabhängig davon, welche Quellanwendung sie bereitgestellt hat.
Diese quellenunabhängige Regel ist eine stärkere redaktionelle Orientierung als ein brüchiger Katalog. Überprüfen Sie den Entfernungshinweis nach dem Einfügen. Es erfasst eindeutige Gründe wie einen nicht unterstützten Wrapper, ein verbotenes Attribut oder eine abgelehnte URL. Der Bericht teilt Ihnen mit, was diese Implementierung verworfen hat, ohne vorzugeben, die Anwendung zu identifizieren, die jedes Fragment ursprünglich generiert hat.
Arbeitsbeispiel: Fügen Sie drei Absätze ein und lesen Sie das gefilterte Markup
Kopieren Sie drei kurze Absätze, wobei Sie den mittleren Satz fett und den letzten als Liste formatieren. Wechseln Sie nach dem Einfügen in den Quellmodus. Absatz-, Strong-, ul- und li-Elemente befinden sich in der Zulassungsliste, während umgebende Divs entpackt werden und Stilattribute verschwinden. Legacy-b- und -i-Tags werden zu „strong“ und „em“ normalisiert.
Fügen Sie nun ein unsicheres Ereignisattribut in einem Einweg-Quellbeispiel hinzu und kehren Sie zum visuellen Modus zurück. Das Attribut wird entfernt, bevor diese Quelle zum DOM wird. Dies zeigt eine Bearbeitungsgrenze und keine sichere Veröffentlichung feindseliger Einsendungen. Das Projekt warnt ausdrücklich vor Parser-Unterschieden und erfordert einen geeigneten serverseitigen Sanitizer für nicht vertrauenswürdige Inhalte.
Das Einfügen von Nur-Text wird nur verwendet, wenn die Zwischenablage keine HTML-Variante bereitstellt
Das Einfügen von Nur-Text ist eine Alternative und kein vom Benutzer auswählbarer Befehl „Einfügen ohne Formatierung“ in dieser Symbolleiste. Wenn die Zwischenablage HTML bereitstellt, übernimmt ToolAcre diesen Zweig. Eine Browser- oder Betriebssystemverknüpfung stellt möglicherweise ein einfaches Einfügen bereit, aber das Repository definiert oder verspricht kein spezifisches Verknüpfungsverhalten.
Wenn nur Text verfügbar ist, fordert `insertText` den Browser auf, diese Zeichen an der Einfügemarke zu platzieren. Jede anschließend erstellte Absatzstruktur unterliegt weiterhin dem Bearbeitungsverhalten des Browsers. Verwenden Sie die Quellansicht, um absichtlich Überschriften oder Listen hinzuzufügen, anstatt davon auszugehen, dass Zeilenumbrüche aus einer anderen Anwendung automatisch die von Ihrem CMS erwartete Struktur annehmen.
Was dies nicht abdeckt – automatische Bereinigungsregeln, CMS-spezifische Einfügefilter oder die Beibehaltung nachverfolgter Änderungen
Dieser Workflow behält keine nachverfolgten Änderungen, Kommentare, Seitenlayout, Schriftarten, Farben, Tabellen oder Bilder bei. Auf Bilder wird bewusst verzichtet, da ein zulässiges Bild eine ausgehende Anfrage und eine Fehlerbehandlungsoberfläche erzeugt. Der Editor verfügt außerdem über kein quellenspezifisches Bereinigungsprofil oder Schalter, der die Treue zu einer Office-Suite verspricht.
Das lokale Einfügen beweist nicht, dass das endgültige Ziel dieselbe Teilmenge akzeptiert. Ein CMS kann weitere Tags entfernen, Links neu schreiben oder seine eigenen Richtlinien durchsetzen. Vergleichen Sie die Editor-Ausgabe mit der Zieldokumentation und bewahren Sie eine Originalkopie auf, wenn durch den Verlust nicht unterstützter Formatierungen Informationen und nicht nur die Präsentation verloren gehen.
Imbiss: Schauen Sie nach, bevor Sie veröffentlichen – fasst die Inspektionsgewohnheiten zusammen und wie Sie mit dem HTML-WYSIWYG-Editor von ToolAcre lokal einfügen und das Markup sehen können, bevor es irgendwohin geht
Schauen Sie vor der Veröffentlichung nach: Fügen Sie ein repräsentatives, nicht sensibles Fragment ein, lesen Sie die Entfernungswarnung, prüfen Sie die Quelle und zeigen Sie eine Vorschau des gefilterten Ergebnisses an. ToolAcre stellt eine explizite Zulassungsliste bereit, anstatt stillschweigend fremde Präsentationen auf Ihre Website zu übertragen. Dadurch wird die Bereinigung zwar sichtbar, aber beliebiges HTML wird dadurch nicht als sicher zertifiziert.
Wenn eine wesentliche Struktur verschwunden ist, bauen Sie sie mit unterstützten Überschriften, Absätzen, Listen, Hervorhebungen und Links neu auf. Wenn das Ziel weniger akzeptiert, vereinfachen Sie dort weiter. Das korrekte Artefakt ist nicht die beste visuelle Nachahmung des Quelldokuments; Es handelt sich um ein überprüftes Markup, dessen Bedeutung und Zielrichtlinie beide verstanden werden.