Outils de développement · Éditeur HTML WYSIWYG
Entrée ou Maj+Entrée : comment les éditeurs choisissent entre <p>, <div> et <br>
· Comment ça marche
html contenu modifiable édition de texte
Explique le modèle de paragraphe derrière les éditeurs de navigateur : pourquoi Enter peut créer un <p> ou un <div>, pourquoi Shift+Enter insère <br> et comment cela décide de votre espacement.
Pourquoi l'espacement est incorrect dans le CMS mais correct dans l'éditeur – s'ouvre avec le problème classique de double espace ou d'absence d'espace
L'espacement qui semble confortable dans l'éditeur peut changer lorsque le fragment entre dans un CMS, car les blocs reçoivent des marges de la feuille de style de destination. Deux paragraphes et deux lignes séparées par br sont structurellement différents même si un aperçu leur donne une distance verticale similaire.
ToolAcre expose cette différence de source. Il ne contient pas de marges copiées ni de styles en ligne, donc l'espacement des paragraphes provient du wrapper d'aperçu ou du CSS de destination ultérieur. Les rédacteurs doivent choisir la structure en fonction de leur signification et vérifier les éléments sérialisés au lieu d'ajouter des touches vides jusqu'à ce qu'une vue temporaire semble correcte.
Bloc et sauts de ligne : explique que <p> et <div> sont des blocs avec leurs propres marges, tandis que <br> est un saut de ligne à l'intérieur d'un bloc.
Paragraph et div sont des conteneurs de blocs ; br est un élément de saut de ligne vide à l'intérieur d'un autre flux. Cet éditeur autorise p et br mais pas div. Un div collé est déballé, préservant ses mots et ses descendants autorisés tout en supprimant le wrapper. Le br aseptisé est émis sous la forme `<br />`.
Une adresse postale peut être un paragraphe avec des sauts de ligne délibérés car ses lignes forment une unité. Deux pensées indépendantes sont mieux représentées sous forme de deux paragraphes. La destination peut styliser les marges p de manière cohérente, tandis que les éléments br répétés utilisés comme espaceurs verticaux codent l'apparence directement dans le contenu.
Ce que fait Enter ici dépend du navigateur et n'est pas configuré par ToolAcre
ToolAcre ne définit pas de commande de séparateur de paragraphe par défaut ni n'intercepte Entrée. Le navigateur contenteditable gère la clé et l'écouteur d'entrée actualise ensuite la sortie. Les limitations du référentiel avertissent que le comportement du moteur diffère, donc affirmer que Enter crée toujours p, crée toujours div ou suit une règle spécifique à la version serait inventé un guide de compatibilité.
L'étape de désinfection réduit ensuite la sérialisation qui arrive. Un div créé par un navigateur ne peut pas survivre en tant que div, bien que son texte puisse rester. Cela peut rendre la source finale encore différente de l'arbre intermédiaire vivant. Le mode source est donc l’endroit idéal pour établir des éléments p explicites lorsque la signification stable du paragraphe est importante.
Les pauses logicielles peuvent être écrites dans le source, mais aucun contrat Shift+Enter n'est implémenté
La barre d'outils n'a pas de bouton « pause logicielle » et le code n'enregistre pas Shift+Enter. Un navigateur peut implémenter ce geste, mais cet article ne promet pas son résultat. Le mode source peut conserver un br autorisé, fournissant un moyen déterministe d'exprimer une rupture dans un paragraphe après avoir inspecté le résultat visuel.
Le comportement du clavier dépend également de l'état de sélection et d'édition que le module ne teste pas. Utilisez le navigateur exact impliqué dans votre travail, puis lisez la source. Si le geste produit un bloc indésirable, réécrivez le fragment explicitement plutôt que de vous fier à une description de raccourci copiée à partir d'un autre framework d'éditeur.
Exemple concret : créez une adresse et une note, puis inspectez plutôt que prédisez
Pour une adresse, utilisez le mode source pour faire un p avec br entre destinataire, rue et localité. Pour une note courte, créez deux éléments p. Revenez au mode visuel, où la source est nettoyée avant l'insertion, et comparez l'aperçu sans supposer que ses marges correspondent au site Web final.
Copiez ensuite le HTML et inspectez le fragment séparément du téléchargement HTML. Le résultat copié contient un balisage de corps nettoyé ; le téléchargement contient un document complet avec l'aperçu CSS de ToolAcre. Cette distinction peut expliquer pourquoi l'ouverture du fichier téléchargé semble plus complète que le collage du fragment copié dans un système avec des styles différents.
Les paragraphes vides et les espaces insécables ne sont conservés que lorsqu'ils sont pris en charge par le réécrivain
Un paragraphe autorisé vide peut rester car p est accepté et aucune règle ne supprime les blocs vides. Une entité connue à espace insécable peut devenir son caractère décodé et ensuite être échappée conformément à l'implémentation de l'entité locale ; le code ne fournit pas de règle de nettoyage ciblant spécifiquement les paragraphes d'espacement.
Par conséquent, « Désinfecter maintenant » n'est pas un nettoyeur de mise en page. Il supprime le balisage et les attributs non pris en charge, équilibre les balises et les formats source, mais il peut conserver le vide structurellement autorisé. Supprimez délibérément les artefacts d'espacement en mode source ou visuel et laissez le CSS de destination fournir des marges normales plutôt que d'accumuler des blocs vides.
Ce que cela ne couvre pas : règles de réduction des marges CSS ou configuration du framework d'éditeur
Cet article ne couvre pas la réduction des marges, la configuration des séparateurs de structure, les matrices de clavier navigateur par navigateur ou les bizarreries d'espacement des e-mails. Il ne prétend pas non plus que l'aperçu reproduit un CMS. Le bac à sable léger utilise sa propre police de corps, sa propre hauteur de ligne, son propre comportement de remplissage et de rupture.
Il ne considère pas non plus la sortie filtrée comme une publication universellement sûre. Une soumission malveillante nécessite une désinfection côté serveur adaptée à la destination, même si un aperçu local jetable reste inerte. La sémantique des paragraphes, le comportement d'édition du navigateur et la politique de sécurité sont trois préoccupations distinctes qui ne doivent pas être regroupées dans un seul test « qui semble correct ».
À retenir : choisissez le saut qui correspond à la signification - résume le modèle et comment l'éditeur HTML WYSIWYG de ToolAcre vous permet de vérifier quel élément chaque clé produit
Choisissez la pause qui correspond au contenu, mais vérifiez plutôt que prédisez la pression sur la touche. ToolAcre donne un accès direct à la source, accepte p et br, déballe div et affiche un rendu en bac à sable. Ces faits soutiennent un flux de travail reproductible sans inventer de promesse sur Entrée ou Maj+Entrée.
Créez une petite adresse et une petite note, changez de mode deux fois et assurez-vous que la structure prévue survit à la désinfection. Si une destination présente des lacunes surprenantes, inspectez son CSS au lieu d'insérer du HTML plus vide. Une signification stable voyage mieux qu’un espacement adapté à un aperçu isolé.