Outils de développement · Éditeur HTML WYSIWYG
Le DOM expliqué aux éditeurs : pourquoi HTML est un arbre et non un fichier texte
· Contexte
html pays contenu modifiable
Présente le modèle objet de document pour les non-programmeurs, couvrant les règles d'imbrication, les éléments parents et enfants et la manière dont les navigateurs réparent l'imbrication non valide, pour expliquer le comportement de l'éditeur qui semble autrement arbitraire.
Pourquoi votre <p> s'est fermé tout seul : s'ouvre avec un balisage qui a changé après un collage
Un paragraphe peut sembler se fermer ou se déplacer après qu'un fragment soit passé par un éditeur, car l'arborescence résultante (et non la séquence de caractères originale de l'auteur) est ce qui compte en fin de compte. ToolAcre ajoute une autre transformation : il tokenise et réécrit la source dérivée du navigateur sous sa propre liste autorisée.
Lorsque la source change, demandez quelle étape l'a modifiée. Le navigateur peut avoir muté le DOM contenteditable, ou le désinfectant peut avoir mappé un alias, déballé un nœud ou équilibré les balises acceptées. Appeler chaque différence « le navigateur l’a corrigé » cache cette frontière importante.
Boîtes à l'intérieur des boîtes – présente le modèle d'arbre avec un court exemple
Considérez les éléments comme des boîtes reliées par des relations parent-enfant. Dans `<p>Read <strong>carefully</strong>.</p>`, p est le parent du texte, fort et plus de texte ; fort est le parent du mot avec soin. L'indentation de la source peut illustrer l'arborescence mais ne crée pas la relation.
Le joli formateur de ToolAcre place les conteneurs de blocs sur les lignes et conserve les éléments en ligne avec le texte environnant. Les listes reçoivent des lignes li en retrait. Ce format est destiné à la lecture d'une sortie nettoyée. Le modèle réel reste des éléments imbriqués et des nœuds de texte, que la source soit compacte ou répartie sur plusieurs lignes.
L'imbrication autorisée est équilibrée par le réécrivain de ToolAcre ; les modèles de contenu du navigateur sont plus larges
HTML définit des modèles de contenu beaucoup plus larges et détaillés que la politique de cet éditeur. ToolAcre autorise un ensemble spécifique mais ne valide pas toutes les règles d'imbrication sémantique. Sa pile garantit une fermeture bien formée parmi les balises autorisées ; cela ne prouve pas que chaque relation qui en résulte constitue un code HTML idéal pour une destination.
Par exemple, une liste doit contenir les éléments de liste appropriés, mais la pile générique peut conserver les combinaisons autorisées inhabituelles car elle n'est pas un validateur de schéma. Les auteurs doivent créer des titres, des paragraphes et des listes sensés via la barre d'outils ou la source examinée, puis valider selon les exigences de destination lorsque l'exactitude est conséquente.
ToolAcre répare les balises acceptées avec une pile, et non l'algorithme d'analyse HTML complet
Les navigateurs appliquent un algorithme d'analyse HTML complet avec récupération des erreurs. ToolAcre ne le réimplémente pas. Son tokenizer reconnaît les structures nécessaires à la liste autorisée et son rédacteur ferme les éléments internes acceptés lorsqu'une balise de fin de croisement apparaît. Il laisse tomber les fermetures parasites et ferme les ouvertures restantes à la fin.
La source nomme explicitement les différentiels des analyseurs comme une raison pour ne pas traiter le module comme un filtre XSS général à entrée hostile. Un navigateur peut interpréter différemment les chaînes délibérément mal formées. Le bac à sable de prévisualisation fournit une limite indépendante d'exécution dans ToolAcre, tandis que les serveurs ont toujours besoin d'un assainissement approprié compatible HTML5.
Nœuds de texte et espaces : explique pourquoi des espaces et des sauts de ligne entre les balises existent dans l'arborescence.
Le texte entre les éléments devient des jetons de texte, y compris les caractères d'espacement. Le joli formateur réduit les espaces ordinaires en dehors du pré, tandis que le contenu du pré est conservé exactement. La conversion en texte brut insère des nouvelles lignes après les fins de bloc et pour br, puis réduit les séries de lignes vides excessives.
Whitespace participe donc différemment à chaque étape. L'espacement visuel peut provenir du texte, du br, des limites des blocs ou du CSS. Inspectez les nœuds et les caractères plutôt que de traiter chaque espace visible comme une marge. Le désinfectant peut normaliser le formatage des espaces sans modifier les mots vus par le lecteur.
Exemple concret : tracer une note de deux paragraphes avec une liste – lit le balisage produit sous forme d'arbre, identifiant les parents et les enfants.
Construisez `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Le fragment a trois éléments enfants au niveau racine. Le paragraphe contient du texte et fort ; la liste contient deux enfants li, chacun avec du texte.
Passer de la source au visuel et inversement. L'arborescence autorisée doit rester équilibrée et le mode joli placera le titre et le paragraphe sur les lignes tout en indentant les éléments de la liste. Cet exercice est contrôlé ; il ne démontre pas chaque entrée mal formée ou chemin de réparation du navigateur.
Ce que cela ne couvre pas : la programmation JavaScript DOM ou le modèle de boîte CSS
Cet article n'enseigne pas la programmation JavaScript DOM, les observateurs de mutations, les API de sélection ou le modèle de boîte CSS. L’arborescence des éléments et l’arborescence des boîtes de présentation sont liées mais pas identiques. Il ne prétend pas non plus que la liste de jetons manuscrite est un DOM de navigateur.
Aucune conclusion de sécurité généralisée ne découle d'un arbre bien rangé. Un attaquant peut cibler les différences d'analyse et les URL, c'est pourquoi le filtrage de sortie, la prévisualisation en bac à sable et l'assainissement du serveur restent distincts. Utilisez le modèle arborescent pour raisonner sur la structure, et non pour renoncer à l’examen de sécurité du système récepteur.
À retenir : pensez en arbres - résume le modèle mental et la façon dont la sortie de balisage de l'éditeur HTML WYSIWYG de ToolAcre montre l'arbre que vous construisez
Pensez aux arbres lorsque le comportement visuel semble arbitraire. Identifiez les nœuds parent, enfants et texte souhaités, puis comparez-les avec la source filtrée. ToolAcre rend cette inspection pratique en associant une rédaction modifiable avec un fragment réécrit lisible.
Un modèle mental fort révèle également des limites : un div non enveloppé perd un parent, un script abandonné perd son sous-arbre et b devient fort. Une fois ces transformations explicites, les corrections deviennent des décisions structurelles plutôt que des coups de pouce visuels répétés dont le balisage reste inconnu.