Strumenti per sviluppatori · HTML WYSIWYG editor
Il DOM spiegato agli editori: perché HTML è un albero, non un file di testo
· Sfondo
html dom contenutomodificabile
Introduce il Document Object Model per i non programmatori, coprendo le regole di annidamento, gli elementi genitore e figlio e il modo in cui i browser riparano l'annidamento non valido, per spiegare il comportamento dell'editor che altrimenti sembrerebbe arbitrario.
Perché il tuo <p> si è chiuso da solo: si apre con markup che è cambiato dopo un incollaggio
Può sembrare che un paragrafo si chiuda o si sposti dopo che un frammento è passato attraverso un editor perché l’albero risultante, non la sequenza di caratteri originale dell’autore, è ciò che alla fine conta. ToolAcre aggiunge un'altra trasformazione: tokenizza e riscrive l'origine derivata dal browser nella propria lista consentita.
Quando la fonte cambia, chiedi quale fase l'ha cambiata. Il browser potrebbe aver modificato il contenuto modificabile DOM oppure il disinfettante potrebbe aver mappato un alias, scartato un nodo o bilanciato i tag accettati. Chiamare ogni differenza “il browser l’ha risolta” nasconde questo importante confine.
Scatole dentro scatole: introduce il modello ad albero con un breve esempio
Pensa agli elementi come a scatole collegate da relazioni genitore-figlio. In `<p>Read <strong>carefully</strong>.</p>`, p è il genitore di text, strong e more text; forte è il genitore della parola attentamente. Il rientro dell'origine può illustrare l'albero ma non crea la relazione.
Il grazioso formattatore di ToolAcre inserisce contenitori di blocchi sulle righe e mantiene gli elementi in linea con il testo circostante. Le liste ricevono linee li rientrate. Questo formato serve per leggere l'output ripulito. Il modello effettivo rimane costituito da elementi nidificati e nodi di testo, indipendentemente dal fatto che l'origine sia compatta o distribuita su più righe.
L'annidamento consentito è bilanciato dal riscrittore di ToolAcre; i modelli di contenuto del browser sono più ampi
HTML definisce modelli di contenuto molto più ampi e dettagliati rispetto alla politica di questo editore. ToolAcre consente un set specifico ma non convalida ogni regola di nidificazione semantica. Il suo stack garantisce una chiusura ben formata tra i tag consentiti; questa non è una prova che ogni relazione risultante sia ideale HTML per una destinazione.
Ad esempio, un elenco dovrebbe contenere elementi di elenco appropriati, ma lo stack generico può preservare combinazioni consentite insolite perché non è un validatore di schema. Gli autori dovrebbero costruire intestazioni, paragrafi ed elenchi sensati tramite la barra degli strumenti o la fonte rivista, quindi convalidarli in base ai requisiti di destinazione quando la correttezza è consequenziale.
ToolAcre ripara i tag accettati con uno stack, non con l'algoritmo di analisi completo HTML
I browser applicano un algoritmo di analisi HTML completo con ripristino degli errori. ToolAcre non lo reimplementa. Il suo tokenizzatore riconosce le strutture necessarie alla lista consentita e il suo scrittore chiude gli elementi interni accettati quando appare un tag di fine incrocio. Rilascia le chiusure vaganti e chiude le aperture rimanenti alla fine.
La fonte menziona esplicitamente i differenziali del parser come motivo per non trattare il modulo come un filtro XSS generale di input ostile. Un browser può interpretare le stringhe deliberatamente non corrette in modo diverso. La sandbox di anteprima fornisce un limite indipendente all'esecuzione all'interno di ToolAcre, mentre i server necessitano comunque di un'adeguata sanificazione HTML5.
Nodi di testo e spazi bianchi: spiega perché nell'albero sono presenti spazi e interruzioni di riga tra i tag
Il testo tra gli elementi diventa token di testo, inclusi i caratteri di spazio bianco. Il grazioso formattatore comprime gli spazi bianchi ordinari all'esterno del pre, mentre il contenuto del pre viene mantenuto esattamente. La conversione in testo semplice inserisce caratteri di fine riga dopo la fine dei blocchi e per br, quindi riduce le quantità eccessive di righe vuote.
Lo spazio bianco quindi partecipa in modo diverso ad ogni fase. La spaziatura visiva può provenire da testo, br, limiti di blocco o CSS. Ispeziona nodi e caratteri invece di trattare ogni spazio visibile come un margine. Lo strumento di disinfezione può normalizzare la formattazione degli spazi bianchi senza modificare le parole visualizzate dal lettore.
Esempio pratico: tracciare una nota di due paragrafi con un elenco: legge il markup prodotto come un albero, identificando genitori e figli
Costruisci `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Il frammento ha tre elementi figli a livello di root. Il paragrafo contiene testo e forte; l'elenco contiene due figli li, ciascuno con testo.
Passa dalla sorgente all'immagine e viceversa. L'albero consentito dovrebbe rimanere bilanciato e la modalità carina posizionerà l'intestazione e il paragrafo sulle righe rientrando gli elementi dell'elenco. Questo esercizio è controllato; non dimostra tutti gli input non validi o il percorso di riparazione del browser.
Cosa non copre: programmazione JavaScript DOM o modello box CSS
Questo articolo non insegna la programmazione JavaScript DOM, gli osservatori di mutazione, le API di selezione o il modello box CSS. L'albero degli elementi e l'albero del riquadro del layout sono correlati ma non identici. Inoltre, non afferma che l'elenco dei token scritti a mano sia un browser DOM.
Da un albero ordinato non deriva alcuna conclusione di sicurezza generalizzata. Un utente malintenzionato può prendere di mira le differenze di analisi e gli URL, motivo per cui il filtraggio dell'output, l'anteprima in modalità sandbox e la pulizia del server rimangono distinti. Utilizzare il modello ad albero per ragionare sulla struttura, non per rinunciare al controllo di sicurezza del sistema ricevente.
Conclusione: pensa per alberi: riassume il modello mentale e il modo in cui l'output di markup dell'editor HTML WYSIWYG di ToolAcre mostra l'albero che stai costruendo
Pensa agli alberi quando il comportamento visivo sembra arbitrario. Identifica il genitore, i figli e i nodi di testo desiderati, quindi confrontali con la fonte filtrata. ToolAcre rende pratica questa ispezione accoppiando la bozza modificabile del contenuto con un frammento riscritto leggibile.
Un modello mentale forte rivela anche dei limiti: il div non imballato perde un genitore, lo script eliminato perde il suo sottoalbero e b diventa forte. Una volta che queste trasformazioni sono esplicite, le correzioni diventano decisioni strutturali piuttosto che ripetute sollecitazioni visive il cui markup rimane sconosciuto.