Strumenti per sviluppatori · HTML WYSIWYG editor
Invio vs Maiusc+Invio: come gli editor scelgono tra <p>, <div> e <br>
· Come funziona
html contenutomodificabile modifica del testo
Spiega il modello di paragrafo alla base degli editor del browser: perché Invio può creare un <p> o un <div>, perché Maiusc+Invio inserisce <br> e come questo determina la spaziatura.
Perché la spaziatura è sbagliata in CMS ma va bene nell'editor: si apre con il classico problema del doppio gap o del no-gap
La spaziatura che appare comoda nell'editor può cambiare quando il frammento entra in CMS perché i blocchi ricevono margini dal foglio di stile di destinazione. Due paragrafi e due righe separate da br sono strutturalmente diversi anche se un'anteprima dà loro una distanza verticale simile.
ToolAcre espone questa differenza nell'origine. Non contiene margini copiati o stili in linea, quindi la spaziatura del paragrafo proviene dal wrapper di anteprima o dalla destinazione successiva CSS. Gli scrittori dovrebbero scegliere la struttura in base al significato e verificare gli elementi serializzati invece di aggiungere sequenze di tasti vuote finché una vista temporanea non appare corretta.
Blocco e interruzioni in linea: spiega che <p> e <div> sono blocchi con i propri margini, mentre <br> è un'interruzione di riga all'interno di un blocco
Paragrafo e div sono contenitori di blocchi; br è un elemento di interruzione di riga vuoto all'interno di un altro flusso. Questo editor consente p e br ma non div. Un div incollato viene scartato, preservandone le parole e i discendenti consentiti scartando l'involucro. Il br disinfettato viene emesso come `<br />`.
Un indirizzo postale può essere costituito da un paragrafo con interruzioni di riga intenzionali perché le sue righe formano un'unità. Due pensieri indipendenti sono meglio rappresentati come due paragrafi. La destinazione può definire lo stile dei margini p in modo coerente, mentre gli elementi br ripetuti utilizzati come distanziatori verticali codificano l'aspetto direttamente nel contenuto.
Ciò che Enter fa qui dipende dal browser e non è configurato da ToolAcre
ToolAcre non imposta un comando separatore di paragrafo predefinito né intercetta Invio. Il browser contenteditable gestisce la chiave e il listener di input aggiorna successivamente l'output. Le limitazioni del repository avvertono che il comportamento del motore è diverso, quindi affermare che Enter crea sempre p, crea sempre div o segue una regola specifica della versione sarebbe una guida alla compatibilità inventata.
La fase di sanificazione restringe quindi qualunque serializzazione arrivi. Un div creato dal browser non può sopravvivere come div, sebbene il suo testo possa rimanere. Ciò potrebbe far sì che la sorgente finale differisca nuovamente dall'albero intermedio attivo. La modalità sorgente è quindi il luogo in cui stabilire elementi p espliciti quando il significato stabile del paragrafo è importante.
Le interruzioni software possono essere scritte nel codice sorgente, ma non è implementato alcun contratto Shift+Invio
La barra degli strumenti non ha un pulsante di "interruzione graduale" e il codice non registra Shift+Invio. Un browser può implementare questo gesto, ma questo articolo non ne promette l'output. La modalità sorgente può mantenere un br consentito, fornendo un modo deterministico per esprimere un'interruzione all'interno di un paragrafo dopo aver esaminato il risultato visivo.
Il comportamento della tastiera dipende anche dalla selezione e dallo stato di modifica che il modulo non verifica. Utilizza il browser esatto coinvolto nel tuo lavoro, quindi leggi la fonte. Se il gesto produce un blocco indesiderato, riscrivi esplicitamente il frammento anziché fare affidamento su una descrizione di collegamento copiata da un altro framework dell'editor.
Esempio pratico: crea un indirizzo e una nota, quindi ispeziona anziché prevedere
Per un indirizzo, utilizzare la modalità sorgente per creare una p con br tra destinatario, via e località. Per una breve nota, crea due elementi p. Ritorna alla modalità visiva, dove la fonte viene ripulita prima dell'inserimento, e confronta l'anteprima senza dare per scontato che i suoi margini corrispondano al sito web finale.
Quindi copia HTML e controlla il frammento separatamente da Scarica HTML. Il risultato copiato contiene markup del corpo disinfettato; il download contiene un documento completo con l'anteprima di ToolAcre CSS. Questa distinzione può spiegare perché aprire il file scaricato sembra più completo che incollare il frammento copiato in un sistema con stili diversi.
I paragrafi vuoti e gli spazi unificatori vengono conservati solo se supportati dal riscrittore
Può rimanere un paragrafo consentito vuoto perché p è accettato e nessuna regola elimina i blocchi vuoti. Un'entità di spazio unificatore nota può diventare il suo carattere decodificato e successivamente essere sottoposta a escape in base all'implementazione dell'entità locale; il codice non fornisce una regola di pulizia specificatamente mirata ai paragrafi distanziatori.
Pertanto, “Sanitise now” non è un pulitore di layout. Rimuove markup e attributi non supportati, bilancia i tag e i formati sorgente, ma può mantenere il vuoto strutturalmente consentito. Elimina deliberatamente gli artefatti di spaziatura in modalità sorgente o visiva e lascia che la destinazione CSS fornisca margini normali anziché accumulare blocchi vuoti.
Cosa non copre: regole di compressione dei margini CSS o configurazione del framework dell'editor
Questo articolo non copre la compressione dei margini, la configurazione dei separatori del framework, le matrici della tastiera browser per browser o i problemi di spaziatura delle e-mail. Inoltre, non afferma che l'anteprima riproduca un CMS. Il sandbox leggero utilizza il proprio carattere del corpo, l'altezza della linea, il riempimento e il comportamento di interruzione.
Né tratta l’output filtrato come una pubblicazione universalmente sicura. Un invio dannoso necessita di una sanificazione lato server adeguata alla destinazione, anche se un'anteprima locale usa e getta rimane inerte. La semantica dei paragrafi, il comportamento di modifica del browser e la politica di sicurezza sono tre preoccupazioni separate che non dovrebbero essere compresse in un unico test "sembra giusto".
Conclusione: scegli l'interruzione che corrisponde al significato: riassume il modello e come l'editor HTML WYSIWYG di ToolAcre ti consente di verificare quale elemento produce ciascuna chiave
Scegli l'interruzione che corrisponde al contenuto, ma verifica anziché prevedere la pressione dei tasti. ToolAcre fornisce accesso diretto al codice sorgente, accetta p e br, scarta div e mostra un rendering sandbox. Questi fatti supportano un flusso di lavoro ripetibile senza inventare una promessa su Invio o Maiusc+Invio.
Crea un piccolo indirizzo e una nota, cambia modalità due volte e assicurati che la struttura prevista sopravviva alla sanificazione. Se una destinazione presenta lacune sorprendenti, controlla il suo CSS invece di inserirne altri vuoti HTML. Il significato stabile viaggia meglio della spaziatura sintonizzata su un'anteprima isolata.