Strumenti per sviluppatori · HTML WYSIWYG editor
Perché execCommand è deprecato e quali editor del browser utilizzano invece
· Come funziona
html contenutomodificabile flusso di lavoro dello sviluppatore
Copre l'ascesa e la caduta di document.execCommand, il motivo per cui il suo output era incoerente e il modo in cui gli editor moderni si basano invece su Selection, Range e beforeinput.
Il pulsante in grassetto di una riga che non è più sicuro: si apre con execCommand('bold') e l'avviso di deprecazione
Un pulsante in grassetto può essere una chiamata: focalizza la superficie di modifica, quindi chiedi a `document.execCommand` di applicare `bold` alla selezione corrente. ToolAcre utilizza ancora quel percorso perché il browser possiede il cursore e l'intervallo selezionato all'interno del suo elemento contenteditable. La chiamata compatta è conveniente, ma la comodità non rende prevedibile l'albero risultante.
Il codice tratta il rifiuto come una possibilità ordinaria. Il suo wrapper di comandi rileva un'eccezione, annuncia che il browser ha rifiutato l'azione e indirizza lo scrittore alla modalità sorgente. Questo fallback è più onesto che promettere che un clic sulla barra degli strumenti produca sempre un elemento particolare o funzioni in modo identico in ogni motore.
Ciò che ha fatto execCommand e da dove proviene: spiega la sua origine nei primi Internet Explorer e la sua adozione da parte di tutti i browser
Lo stesso wrapper gestisce elenchi in grassetto, corsivo, non ordinati e ordinati, rimozione della formattazione, annullamento, ripetizione, blocco della formattazione, collegamenti e scollegamento. Questi sono i comandi effettivamente presenti nella barra degli strumenti; questo articolo non estende l'elenco con allineamento, colori, caratteri, tabelle, immagini o altre funzionalità rich-text familiari che l'implementazione non espone mai.
Ogni comando viene eseguito contro il live modificabile DOM. Successivamente, il pannello aggiorna la fonte, l'anteprima, il conteggio delle parole e il rapporto sulla rimozione dall'attuale innerHTML. Il risultato salvato non è quindi un registro dei comandi. Si tratta di una serializzazione filtrata di qualsiasi struttura lasciata dal browser dopo aver eseguito o rifiutato l'operazione richiesta.
Perché il comando API è deprecato: i browser possono produrre diverse forme DOM
La deprecazione è importante perché API non fornisce all'autore dell'editor un contratto strutturale preciso per ogni mutazione. Le limitazioni ToolAcre avvertono esplicitamente che il comportamento differisce tra i motori, in particolare attorno agli elenchi nidificati. Un elenco visibile può essere accettabile mentre le sue scelte di nidificazione o wrapper differiscono dal markup prodotto da un altro browser.
Nessuna fonte di repository supporta l'affermazione secondo cui ogni browser, versione o comando ha un particolare risultato di compatibilità. L'istruzione safe è più ristretta: questa implementazione richiama il deprecato API, rileva il rifiuto e offre la modifica diretta del codice sorgente come via di fuga. Testare il browser e l'operazione che intendi utilizzare anziché estrapolare una matrice.
Selezione e Intervallo sono alternative rilevanti, ma questo strumento non le implementa
Selezione e Intervallo possono descrivere i limiti DOM selezionati e supportare la manipolazione esplicita dell'albero, ma ToolAcre non implementa un motore di formattazione sostitutivo con essi. Denominare tali API come se fossero il percorso del codice corrente descriverebbe erroneamente il prodotto. In questo caso, il comando del browser rimane il mutatore e il disinfettante rimane il confine di output.
Un modello personalizzato potrebbe possedere contrassegni, blocchi, transazioni e mappature di selezione, ma si tratta di un'architettura di prodotto diversa con test diversi. Questo editor leggero evita deliberatamente di rivendicare tali macchinari. Il suo contratto rivedibile è che le azioni visive possono creare DOM dipendenti dal browser, mentre la modalità sorgente rivela il markup filtrato che verrà effettivamente copiato o scaricato.
beforeinput non fa parte del percorso di formattazione di questo editor
Inoltre, l'implementazione non intercetta `beforeinput` per tradurre le intenzioni di modifica in transazioni personalizzate. Gli eventi di input attivano semplicemente un aggiornamento dopo che il browser ha modificato la superficie. Incolla e rilascia sono eccezioni: tali eventi vengono impediti, il relativo payload degli appunti o del trasferimento viene filtrato e viene inserito solo il HTML risultante o il testo normale.
Questa distinzione impedisce un’ampia rivendicazione architettonica. ToolAcre possiede il gate di incolla ma non tutte le mutazioni dei tasti. La digitazione ordinaria, l'eliminazione, il comportamento di immissione e i comandi della barra degli strumenti rimangono operazioni di modifica del browser. Il disinfettante esamina l'output serializzato; non trasforma l'editor in un framework basato prima sull'input né normalizza ogni mutazione intermedia DOM.
Esempio realizzato: ispeziona l'output del comando legacy effettivamente prodotto da questo editor
Per un controllo concreto, digitare due frasi brevi, selezionare una frase e premere Grassetto. Passa alla fonte HTML e controlla l'elemento attorno a quella frase. ToolAcre mappa l'eredità `b` su `strong` durante la sanificazione, in modo che il risultato filtrato possa essere semantico anche quando il comando di modifica in tempo reale ha inizialmente scelto un tag legacy.
Ripeti con un elenco e poi annulla. La barra degli strumenti invia `insertUnorderedList` e `undo`; non mantiene una cronologia delle applicazioni separata. Se il browser rifiuta, lo dice la regione dello stato. Se l'annidamento sembra strano, la modalità sorgente è il percorso di correzione supportato. La prova è l’output osservato, non l’etichetta del pulsante.
Cosa non copre: qui non è implementata alcuna architettura di editor sostitutiva
Questo articolo non rivendica il supporto per un moderno sistema di comandi sostitutivi, transazioni collaborative, alberi deterministici tra browser o uno stack di annullamento personalizzato. Inoltre, non deduce il comportamento delle scorciatoie da tastiera perché l'origine definisce le azioni della barra degli strumenti, non un registro delle scorciatoie. Le funzionalità non supportate rimangono omissioni piuttosto che funzionalità implicite.
La sicurezza è separata dalla scelta del comando. I filtri della lista consentita hanno emesso markup e l'anteprima è sandbox senza script, ma lo strumento di disinfezione ne nega esplicitamente l'utilizzo come filtro XSS generale per input ostili. Un server che accetta contenuti di pubblicazioni non attendibili necessita comunque di un disinfettante HTML5-parser lato server appropriato e di una policy specifica per la destinazione.
Conclusione: possiedi DOM, non il comando: riassume il percorso di migrazione e il modo in cui il markup risultante è ciò che controlli in uno strumento WYSIWYG-to-HTML
Possiedi il risultato che puoi controllare. In questo editor, un comando chiede al browser di modificare un albero modificabile dal contenuto, quindi la lista consentita riscrive la serializzazione di quell'albero nel sottoinsieme supportato. La modalità sorgente espone l'handoff e fornisce una pratica superficie di riparazione quando il comportamento di modifica del browser è scomodo o incoerente.
Utilizza un campione usa e getta nello stesso browser del tuo lavoro reale. Esercita solo i comandi forniti, ispeziona i collegamenti e l'annidamento, prova l'annullamento prima di fare affidamento su di esso e copia il HTML filtrato solo dopo averlo letto. Questo flusso di lavoro rispetta la deprecazione senza pretendere che ToolAcre abbia già sostituito la modifica sottostante API.