Strumenti per sviluppatori · HTML WYSIWYG editor
Cosa succede quando incolli da Word o Google Docs in un editor Web
· Come funziona
html contenutomodificabile pulizia del testo
Spiega cosa trasportano le paste rich-text, dagli stili mso- agli elementi wrapper e agli stack di caratteri, e mostra come leggere il markup risultante prima che raggiunga il tuo sito.
Sembrava a posto in Word: si apre con un articolo incollato la cui spaziatura e i cui caratteri contrastano con il design del sito
Un paragrafo copiato da un elaboratore di testi può sembrare curato alla fonte e arrivare con caratteri, spaziatura e wrapper in conflitto con un sito. ToolAcre non preserva la presentazione in blocco. Il suo ascoltatore di incolla intercetta l'operazione prima che venga inserito il ricco markup originale e sceglie invece una rappresentazione filtrata.
La prova importante è la visione della fonte, non se la prima impressione visiva somiglia al documento originale. L'editor è intenzionalmente ristretto: intestazioni, paragrafi, enfasi, elenchi, citazioni, elementi simili a codici e collegamenti possono sopravvivere, mentre contenitori di layout, nomi di classi, ID e attributi di stile inline non appartengono al suo contratto di output.
Gli appunti contengono più del semplice testo: spiega che una copia rich-text include un sapore HTML insieme al testo semplice
Gli appunti possono esporre `text/html` e `text/plain` per un'operazione di copia. Il conduttore li chiede entrambi. Quando esiste un payload HTML, disinfetta quella stringa e inserisce il frammento riscritto con `insertHTML`; solo quando il ricco HTML è assente inserisce il payload semplice con `insertText`.
Tale precedenza è comprovata dal codice per questo pannello e non è una dichiarazione universale su ogni applicazione. Spiega perché una pasta ricca può mantenere un elenco pur perdendo il suo aspetto. L'applicazione di origine ha scritto gli appunti HTML, ma la lista consentita di ToolAcre decide quale parte è ammessa alla superficie modificabile.
Ciò che questo editor rimuove dalla pasta avanzata: elementi, attributi e commenti non supportati
Gli elementi non supportati vengono gestiti in due modi. I wrapper ordinari sconosciuti vengono scartati in modo che le loro parole rimangano, mentre script, stile, iframe, modulo, SVG, MathML e altri contenitori rischiosi o non editor vengono rimossi insieme ai loro contenuti. Anche i commenti e i doctype vengono scartati invece di essere inseriti nella bozza.
Gli attributi si affacciano su una seconda porta. Classe, ID, stile, attributi dei dati e ogni gestore di eventi vengono rimossi perché gli attributi consentiti sono denominati per elemento. Ciò significa che i nomi delle classi specifiche dell'origine e la presentazione in linea non possono contrastare il foglio di stile di destinazione dopo che ToolAcre ha filtrato l'incolla, sebbene anche gli stili di origine utili potrebbero scomparire.
Perché i wrapper e gli stili specifici dell'origine non sopravvivono nella lista consentita
Il repository non fornisce dispositivi Word o Google Docs acquisiti, quindi questo articolo non inventa classi `mso-` esatte, ID interni o sequenze wrapper per versioni particolari. Può affermare la conseguenza dimostrata dalla lista consentita: classi e stili vengono rimossi indipendentemente dall'applicazione sorgente che li ha forniti.
Questa regola indipendente dalla fonte è una guida editoriale più forte di un catalogo fragile. Controllare l'avviso di rimozione dopo averlo incollato. Registra motivi univoci come un wrapper non supportato, un attributo vietato o URL rifiutato. Il report ti dice cosa ha scartato questa implementazione senza pretendere di identificare l'applicazione che originariamente ha generato ogni frammento.
Esempio realizzato: incolla tre paragrafi e leggi il markup filtrato
Copia tre paragrafi brevi, mettendo la frase centrale in grassetto e l'ultima in un elenco. Dopo aver incollato, passa alla modalità sorgente. Gli elementi paragrafo, strong, ul e li sono nella lista consentita, mentre i div circostanti vengono scartati e gli attributi di stile scompaiono. I tag legacy b e i si normalizzano in strong ed em.
Ora aggiungi un attributo di evento non sicuro in un campione di origine usa e getta e torna alla modalità visiva. L'attributo viene rimosso prima che l'origine diventi DOM. Ciò dimostra un limite di modifica e una pubblicazione non sicura di contributi ostili. Il progetto avverte esplicitamente delle differenze del parser e richiede un idoneo disinfettante lato server per i contenuti non attendibili.
L'incolla di testo normale viene utilizzato solo quando gli appunti non forniscono alcun sapore HTML
L'inserimento di testo normale è un comando di riserva, non un comando "incolla senza formattazione" selezionabile dall'utente in questa barra degli strumenti. Se gli appunti forniscono HTML, ToolAcre prende quel ramo. Un collegamento del browser o del sistema operativo può esporre un semplice incolla, ma il repository non definisce né promette un comportamento specifico del collegamento.
Quando è disponibile solo testo, `insertText` chiede al browser di posizionare tali caratteri nell'accento circonflesso. Qualsiasi struttura di paragrafo creata successivamente rimane soggetta al comportamento di modifica del browser. Utilizza la visualizzazione sorgente per aggiungere intestazioni o elenchi deliberati anziché presumere che le interruzioni di riga di un'altra applicazione diventino automaticamente la struttura che CMS si aspetta.
Cosa non copre: regole di pulizia automatica, filtri incolla specifici per CMS o conservazione delle modifiche tracciate
Questo flusso di lavoro non conserva le modifiche tracciate, i commenti, il layout della pagina, i caratteri, i colori, le tabelle o le immagini. Le immagini sono deliberatamente assenti perché un'immagine consentita crea una richiesta in uscita e una superficie per la gestione degli errori. L'editor inoltre non ha un profilo di pulizia specifico per la fonte o un interruttore che prometta fedeltà a una suite per ufficio.
Incollare localmente non dimostra che la destinazione finale accetterà lo stesso sottoinsieme. Un CMS può eliminare più tag, riscrivere i collegamenti o applicare la propria politica. Confronta l'output dell'editor con la documentazione di destinazione e conserva una copia originale quando la perdita della formattazione non supportata rimuoverebbe le informazioni anziché la semplice presentazione.
Conclusione: guarda prima di pubblicare: riassume l'abitudine di ispezione e come l'editor HTML WYSIWYG di ToolAcre ti consente di incollare localmente e vedere il markup prima che vada ovunque
Guarda prima di pubblicare: incolla un frammento rappresentativo e non sensibile, leggi l'avviso di rimozione, esamina la fonte e visualizza in anteprima il risultato filtrato. ToolAcre fornisce una lista consentita esplicita anziché inserire silenziosamente presentazioni straniere nel tuo sito. Ciò rende visibile la pulizia, ma non certifica HTML arbitrario come sicuro.
Se la struttura essenziale è scomparsa, ricostruiscila con titoli, paragrafi, elenchi, enfasi e collegamenti supportati. Se il target accetta di meno, semplifica ulteriormente lì. L'artefatto corretto non è l'imitazione visiva più fedele del documento di origine; si tratta di markup rivisto di cui si comprendono sia il significato che la politica di destinazione.