Strumenti per sviluppatori · HTML WYSIWYG editor
Come un editor WYSIWYG trasforma la formattazione in HTML: spiegazione di contenteditable
· Come funziona
html contenutomodificabile flusso di lavoro dello sviluppatore
Spiega l'attributo contenteditable che rende modificabile qualsiasi elemento, in che modo il browser modifica DOM durante la digitazione e la formattazione e in che modo DOM diventa HTML che copi.
Hai premuto in grassetto; da dove viene il <strong>? - si apre con l'intervallo tra il clic su un pulsante e la visualizzazione del markup
Un pulsante della barra degli strumenti etichettato in grassetto sembra un pennello, ma il browser deve rappresentare il risultato in una struttura ad albero del documento. Una frase selezionata può diventare un elemento <b> o <strong> a seconda del comando e del motore di modifica. Il compito dello sviluppatore è trasformare quelle mutazioni specifiche del browser in HTML che un'altra pagina possa leggere senza accettare ogni tag o attributo pericoloso. Ciò che vedi sullo schermo è un file DOM modificabile, non un file di elaborazione testi con un livello di formattazione indipendente.
contenteditable: l'attributo che rende modificabile una pagina: spiega l'host di modifica, il posizionamento del cursore e il modo in cui il browser possiede il comportamento di modifica
contenteditable="true" rende un elemento un host di modifica. Il browser gestisce lo spostamento, la selezione, l'inserimento e la cancellazione del cursore al suo interno, con un albero DOM sottostante. La superficie di modifica di ToolAcre utilizza questa funzionalità del browser ed espone sia la modalità visiva che la modalità sorgente; il contenuto rimane nella pagina invece di essere inviato a un server rich-text. Un evento incolla riceve un'attenzione separata perché incollato HTML può includere elementi e attributi che non devono entrare in un documento attendibile senza controllo.
Ogni sequenza di tasti è una mutazione DOM: descrive la crescita dei nodi di testo, gli elementi che vengono spostati e divisi e il motivo per cui l'albero cambia anche quando il testo sembra invariato
La digitazione crea o estende nodi di testo; premendo Invio è possibile dividere un blocco; il grassetto di una selezione racchiude un intervallo. Non è garantito che la stringa DOM esatta dopo due clic corrisponda alla stringa <strong> immaginata dallo sviluppatore: i browser scelgono elementi e annidamenti diversi. ToolAcre attualmente utilizza document.execCommand per la formattazione. Quel API è deprecato, ma qui non esiste una sostituzione drop-in implementata in modo uniforme per ogni operazione di modifica, quindi l'editor tratta il suo output come input non attendibile da normalizzare anziché come markup canonico.
Dalla stringa DOM live alla stringa HTML: spiega la serializzazione dell'albero modificato nel markup che puoi copiare
Per copiare HTML, l'editor legge l'innerHTML della superficie di modifica e passa la stringa risultante attraverso una lista consentita element/attribute. Tag come b sono normalizzati su una forte semantica; i collegamenti consentiti vengono controllati per verificare la presenza di schemi URL accettabili, mentre i gestori eventi e gli attributi non correlati vengono rimossi. La modalità sorgente passa anche il testo attraverso lo stesso filtro prima di reinserirlo nella superficie visiva. Questo è un percorso di pulizia specifico dell'editor, non un disinfettante HTML lato server per scopi generici per contenuti ostili provenienti da utenti arbitrari.
Esempio realizzato: una nota di due paragrafi con una frase in grassetto: segue DOM digitando, selezionando e mettendo in grassetto, quindi mostra il markup risultante
Digita due paragrafi: "Aggiornamento progetto" e "Bozza pronta", quindi seleziona "Bozza" nel secondo e premi Grassetto. Un browser può inserire <b>Draft</b> nel live DOM. Il passaggio alla modalità sorgente lo fa passare attraverso il disinfettante di ToolAcre, che può emettere <strong>Draft</strong> all'interno del suo paragrafo dopo la normalizzazione. Prova un payload <img onerror="..."> incollato in un documento usa e getta: la lista consentita di output non include immagini o attributi del gestore eventi. L'esempio illustra il motivo per cui controlli il markup risultante anziché presupporre che un clic abbia una rappresentazione HTML universale.
Perché le stesse azioni forniscono markup diverso in browser diversi: copre il comportamento di modifica specifico del browser e il motivo per cui gli editor normalizzano il proprio output
Browser diversi implementano comandi di modifica, interruzioni di riga e limiti di selezione in modo diverso. Anche paragrafi visibili identici possono essere serializzati con diverse estensioni nidificate o elementi di blocco. Il passaggio di normalizzazione riduce alcune differenze ma non rende una superficie WYSIWYG un serializzatore garantito dagli standard. ToolAcre mostra l'origine insieme al risultato visivo, in modo da poter correggere la nidificazione dispari. La sua anteprima viene eseguita in un iframe con un attributo sandbox che non garantisce l'esecuzione di script, limitando l'impatto di un frammento non sicuro che raggiunge quell'anteprima.
Ciò che questo non copre: la modifica collaborativa, gli stack di annullamento e i framework completi dell'editor non rientrano nell'ambito
Questa pagina non promette modifiche collaborative, una cronologia completa degli annullamenti, un client di posta elettronica raffinato o una struttura di editor completa. Contenteditable non può decidere da solo quale markup accetta un CMS di terze parti e una lista consentita basata su stringhe non sostituisce un disinfettante HTML5-parser lato server in cui gli utenti non attendibili possono inviare contenuti. L'anteprima in modalità sandbox è una difesa separata dall'output di pulizia; né rende sicuri gli URL JavaScript arbitrari o ostili in ogni destinazione.
Conclusione: l'editor è un DOM che puoi vedere: riassume il meccanismo e come l'editor HTML WYSIWYG di ToolAcre espone il markup prodotto dalla formattazione, senza uscire dal browser
L'editor è un DOM che puoi vedere e controllare. L'editor HTML WYSIWYG di ToolAcre ti offre un modo diretto per confrontare un'azione di formattazione visiva con l'HTML filtrato che produce, localmente nel tuo browser. Digita e metti in grassetto una nota usa e getta, passa alla modalità sorgente e mantieni solo gli elementi effettivamente supportati dalla tua destinazione.