Entwicklertools · HTML-WYSIWYG-Editor
Warum execCommand veraltet ist und was Browser-Editoren stattdessen verwenden
· Wie es funktioniert
html inhaltsbearbeitbar Entwickler-Workflow
Behandelt den Aufstieg und Fall von document.execCommand, warum seine Ausgabe inkonsistent war und wie moderne Editoren stattdessen auf Selection, Range und beforeinput aufbauen.
Die einzeilige Fettschaltfläche, die nicht mehr sicher ist – wird mit execCommand('bold') und der Veraltungswarnung geöffnet
Eine fett gedruckte Schaltfläche kann ein Aufruf sein: Fokussieren Sie die Bearbeitungsoberfläche und bitten Sie dann `document.execCommand`, `bold` auf die aktuelle Auswahl anzuwenden. ToolAcre verwendet diesen Pfad weiterhin, da der Browser Eigentümer des Caretzeichens und des ausgewählten Bereichs in seinem inhaltsbearbeitbaren Element ist. Der kompakte Aufruf ist praktisch, aber die Bequemlichkeit macht den resultierenden Baum nicht vorhersehbar.
Der Kodex behandelt die Ablehnung als eine gewöhnliche Möglichkeit. Sein Befehls-Wrapper fängt eine Ausnahme ab, gibt bekannt, dass der Browser die Aktion abgelehnt hat, und leitet den Writer in den Quellmodus. Dieser Rückgriff ist ehrlicher als das Versprechen, dass ein Klick in der Symbolleiste immer ein bestimmtes Element erzeugt oder in jeder Engine identisch funktioniert.
Was execCommand tat und woher es kam – erklärt seinen Ursprung im frühen Internet Explorer und seine Übernahme durch jeden Browser
Derselbe Wrapper steuert fette, kursive, ungeordnete und geordnete Listen, Formatierungsentfernung, Rückgängigmachen, Wiederherstellen, Blockformatierung, Links und das Aufheben von Verknüpfungen. Das sind die Befehle, die tatsächlich in der Symbolleiste vorhanden sind. Dieser Artikel erweitert die Liste nicht um Ausrichtung, Farben, Schriftarten, Tabellen, Bilder oder andere bekannte Rich-Text-Funktionen, die die Implementierung niemals verfügbar macht.
Jeder Befehl wird gegen das live bearbeitbare DOM ausgeführt. Anschließend aktualisiert das Panel seinen Quell-, Vorschau-, Wortzahl- und Entfernungsbericht aus dem aktuellen innerHTML. Das gespeicherte Ergebnis ist daher kein Befehlsprotokoll. Es handelt sich um eine gefilterte Serialisierung der Struktur, die der Browser hinterlassen hat, nachdem er den angeforderten Vorgang ausgeführt oder abgelehnt hat.
Warum die Befehls-API veraltet ist: Browser können unterschiedliche DOM-Formen erzeugen
Die Abwertung ist wichtig, da die API einem Editor-Autor keinen genauen Strukturvertrag für jede Mutation gibt. Die ToolAcre-Einschränkungen weisen ausdrücklich darauf hin, dass sich das Verhalten zwischen den Engines unterscheidet, insbesondere bei verschachtelten Listen. Eine sichtbare Liste kann akzeptabel sein, auch wenn ihre Verschachtelungs- oder Wrapper-Auswahl vom Markup eines anderen Browsers abweicht.
Keine Repository-Quelle unterstützt die Behauptung, dass jeder Browser, jede Version oder jeder Befehl ein bestimmtes Kompatibilitätsergebnis hat. Die sichere Anweisung ist enger gefasst: Diese Implementierung ruft die veraltete API auf, fängt Ablehnungen ab und bietet als Notausstieg die direkte Quellbearbeitung an. Testen Sie den Browser und die Operation, die Sie verwenden möchten, anstatt eine Matrix zu extrapolieren.
Auswahl und Bereich sind relevante Alternativen, aber dieses Tool implementiert sie nicht
Selection und Range können ausgewählte DOM-Grenzen beschreiben und eine explizite Baummanipulation unterstützen, aber ToolAcre implementiert damit keine Ersatzformatierungs-Engine. Diese APIs so zu benennen, als wären sie der aktuelle Codepfad, würde das Produkt falsch beschreiben. Hier bleibt der Browserbefehl der Mutator und der Sanitizer bleibt die Ausgabegrenze.
Ein benutzerdefiniertes Modell könnte Markierungen, Blöcke, Transaktionen und Auswahlzuordnungen besitzen, aber das ist eine andere Produktarchitektur mit anderen Tests. Dieser leichtgewichtige Editor vermeidet es bewusst, solche Maschinen zu beanspruchen. Sein überprüfbarer Vertrag besteht darin, dass visuelle Aktionen ein browserabhängiges DOM erstellen können, während der Quellmodus das gefilterte Markup offenlegt, das tatsächlich kopiert oder heruntergeladen wird.
beforeinput ist nicht Teil des Formatierungspfads dieses Editors
Die Implementierung fängt `beforeinput` auch nicht ab, um Bearbeitungsabsichten in benutzerdefinierte Transaktionen zu übersetzen. Eingabeereignisse lösen lediglich eine Aktualisierung aus, nachdem der Browser die Oberfläche geändert hat. Ausnahmen sind Einfügen und Ablegen: Diese Ereignisse werden verhindert, ihre Zwischenablage oder Übertragungsnutzlast wird gefiltert und nur der resultierende HTML- oder Nur-Text wird eingefügt.
Diese Unterscheidung verhindert einen breiten architektonischen Anspruch. ToolAcre besitzt das Paste-Gate, aber nicht jede Tastenkombinationsmutation. Gewöhnliche Eingabe-, Lösch-, Eingabeverhaltens- und Symbolleistenbefehle bleiben Browser-Bearbeitungsvorgänge. Der Sanitizer überprüft seine serialisierte Ausgabe; Es verwandelt den Editor nicht in ein voreingabegesteuertes Framework und normalisiert auch nicht jede dazwischenliegende DOM-Mutation.
Funktioniertes Beispiel: Untersuchen Sie die Legacy-Befehlsausgabe, die dieser Editor tatsächlich erzeugt
Geben Sie für eine konkrete Prüfung zwei kurze Sätze ein, wählen Sie einen Satz aus und drücken Sie Fett. Wechseln Sie zur HTML-Quelle und überprüfen Sie das Element um diese Phrase. ToolAcre ordnet während der Bereinigung das Legacy-Tag `b` dem `strong` zu, sodass das gefilterte Ergebnis auch dann semantisch sein kann, wenn der Live-Bearbeitungsbefehl ursprünglich ein Legacy-Tag ausgewählt hat.
Wiederholen Sie den Vorgang mit einer Liste und machen Sie ihn dann rückgängig. Die Symbolleiste sendet `insertUnorderedList` und `undo`; Es wird kein separater Anwendungsverlauf geführt. Wenn der Browser dies ablehnt, wird dies in der Statusregion angezeigt. Wenn die Verschachtelung seltsam aussieht, ist der Quellmodus der unterstützte Korrekturpfad. Der beobachtete Ausgang, nicht die Schaltflächenbeschriftung, ist der Beweis.
Was dies nicht abdeckt: Hier ist keine Ersatz-Editor-Architektur implementiert
Dieser Artikel erhebt keinen Anspruch auf Unterstützung für ein modernes Ersatzbefehlssystem, kollaborative Transaktionen, deterministische Cross-Browser-Bäume oder einen benutzerdefinierten Undo-Stack. Außerdem wird kein Verhalten für Tastaturkürzel abgeleitet, da die Quelle Symbolleistenaktionen und keine Verknüpfungsregistrierung definiert. Nicht unterstützte Funktionen bleiben eher Auslassungen als implizierte Funktionen.
Sicherheit ist von der Befehlsauswahl getrennt. Die Zulassungsliste filtert ausgegebenes Markup und die Vorschau wird ohne Skripte in einer Sandbox gespeichert, der Sanitizer lehnt jedoch ausdrücklich die Verwendung als allgemeiner XSS-Filter für feindselige Eingaben ab. Ein Server, der nicht vertrauenswürdige Veröffentlichungsinhalte akzeptiert, benötigt dennoch eine entsprechende serverseitige HTML5-Parser-Bereinigung und eine zielspezifische Richtlinie.
Takeaway: Besitzen Sie das DOM, nicht den Befehl – fasst den Migrationspfad zusammen und wie das resultierende Markup das ist, was Sie in einem WYSIWYG-zu-HTML-Tool überprüfen
Besitzen Sie das Ergebnis, das Sie überprüfen können. In diesem Editor fordert ein Befehl den Browser auf, einen inhaltsbearbeitbaren Baum zu ändern. Anschließend schreibt die Zulassungsliste die Serialisierung dieses Baums in die unterstützte Teilmenge um. Der Quellmodus macht die Übergabe sichtbar und bietet eine praktische Reparaturoberfläche, wenn das Bearbeitungsverhalten des Browsers unbequem oder inkonsistent ist.
Verwenden Sie ein Einwegmuster im selben Browser wie Ihre eigentliche Arbeit. Führen Sie nur die mitgelieferten Befehle aus, überprüfen Sie Links und Verschachtelungen, testen Sie das Rückgängigmachen, bevor Sie sich darauf verlassen, und kopieren Sie den gefilterten HTML-Code erst, nachdem Sie ihn gelesen haben. Dieser Workflow respektiert die veraltete Version, ohne so zu tun, als hätte ToolAcre die zugrunde liegende Bearbeitungs-API bereits ersetzt.