Outils de développement · Éditeur HTML WYSIWYG
Comment un éditeur WYSIWYG transforme le formatage en HTML : contenteditable expliqué
· Comment ça marche
HTML contentmodifiable workflow de développeur
Explique l'attribut contenteditable qui rend n'importe quel élément modifiable, comment le navigateur mute le DOM lorsque vous tapez et formatez, et comment ce DOM devient le code HTML que vous copiez.
Vous avez appuyé sur gras ; d'où vient le <strong> ? - s'ouvre avec l'écart entre cliquer sur un bouton et voir le balisage
Un bouton de barre d'outils intitulé Gras ressemble à un pinceau, mais le navigateur doit représenter le résultat dans une arborescence de documents. Une phrase sélectionnée peut devenir un élément <b> ou <strong> selon la commande et le moteur d'édition. La tâche du développeur est de transformer ces mutations spécifiques au navigateur en HTML qu'une autre page peut lire sans accepter chaque balise ou attribut dangereux. Ce que vous voyez à l'écran est un DOM modifiable, pas un fichier de traitement de texte avec une couche de formatage indépendante.
contenteditable : l'attribut qui rend une page modifiable – explique l'hôte d'édition, le placement du curseur et comment le navigateur possède le comportement d'édition
contenteditable="true" fait d'un élément un hôte d'édition. Le navigateur gère le mouvement, la sélection, l'insertion et la suppression du curseur à l'intérieur, avec une arborescence DOM en dessous. La surface d'édition de ToolAcre utilise cette fonctionnalité du navigateur et expose à la fois le mode visuel et le mode source ; le contenu reste dans la page au lieu d'être soumis à un serveur de texte enrichi. Un événement de collage reçoit une attention particulière car le HTML collé peut inclure des éléments et des attributs qui ne doivent pas entrer dans un document approuvé sans être cochés.
Chaque frappe est une mutation DOM : décrit la croissance des nœuds de texte, les éléments encapsulés et divisés, et pourquoi l'arborescence change même lorsque le texte semble inchangé.
La saisie crée ou étend des nœuds de texte ; appuyer sur Entrée peut diviser un bloc ; mettre en gras une sélection enveloppe une plage. Il n'est pas garanti que le DOM précis après deux clics corresponde à la chaîne <strong> imaginée par un développeur : les navigateurs choisissent différents éléments et imbrications. ToolAcre utilise actuellement document.execCommand pour le formatage. Cette API est obsolète, mais il n'y a pas de remplacement immédiat implémenté de manière uniforme pour chaque opération d'édition ici, de sorte que l'éditeur traite sa sortie comme une entrée non fiable à normaliser plutôt que comme un balisage canonique.
Du DOM en direct à la chaîne HTML : explique la sérialisation de l'arborescence modifiée dans un balisage que vous pouvez copier
Pour copier du HTML, l’éditeur lit le innerHTML de la surface d’édition et transmet la chaîne résultante via une liste autorisée d’éléments/attributs. Les balises telles que b sont normalisées en sémantique forte ; les liens autorisés sont vérifiés pour les schémas d'URL acceptables, tandis que les gestionnaires d'événements et les attributs non liés sont supprimés. Le mode source fait également passer son texte à travers le même filtre avant de le remettre dans la surface visuelle. Il s'agit d'un chemin de nettoyage spécifique à l'éditeur, et non d'un désinfectant HTML côté serveur à usage général pour le contenu hostile provenant d'utilisateurs arbitraires.
Exemple concret : une note de deux paragraphes avec une phrase en gras – suit le DOM en tapant, en sélectionnant et en mettant en gras, puis affiche le balisage résultant
Tapez deux paragraphes – « Mise à jour du projet » et « Brouillon prêt » – puis sélectionnez « Brouillon » dans le second et appuyez sur Gras. Un navigateur peut insérer <b>Draft</b> dans le DOM en direct. Le passage en mode source le fait passer par le désinfectant de ToolAcre, qui peut émettre <strong>Draft</strong> à l'intérieur de son paragraphe après normalisation. Essayez une charge utile <img onerror="..."> collée dans un document jetable : la liste autorisée de sortie n'inclut pas d'images ni d'attributs de gestionnaire d'événements. L'exemple illustre pourquoi vous inspectez le balisage résultant plutôt que de supposer qu'un clic a une représentation HTML universelle.
Pourquoi les mêmes actions donnent un balisage différent dans différents navigateurs – couvre le comportement d'édition spécifique au navigateur et pourquoi les éditeurs normalisent leur sortie
Différents navigateurs implémentent différemment les commandes d’édition, les sauts de ligne et les limites de sélection. Même des paragraphes visibles identiques peuvent être sérialisés avec différentes étendues ou éléments de bloc imbriqués. L'étape de normalisation réduit certaines différences mais ne fait pas d'une surface WYSIWYG un sérialiseur garanti par les normes. ToolAcre affiche la source à côté du résultat visuel, afin que vous puissiez corriger les imbrications étranges. Son aperçu s'exécute dans une iframe avec un attribut sandbox n'autorisant aucune exécution de script, limitant ainsi l'impact d'un fragment dangereux atteignant cet aperçu.
Ce que cela ne couvre pas : l'édition collaborative, les piles d'annulation et les cadres d'édition complets sont hors de portée.
Cette page ne promet pas d'édition collaborative, un historique complet des annulations, un client de messagerie raffiné ou un cadre d'édition complet. Contenteditable ne peut pas décider par lui-même quel balisage un CMS tiers accepte, et une liste blanche basée sur des chaînes ne remplace pas un analyseur HTML5 côté serveur où des utilisateurs non fiables peuvent soumettre du contenu. L'aperçu en bac à sable constitue une défense distincte de la sortie de nettoyage ; ni le JavaScript arbitraire ni les URL hostiles ne sont sécurisés dans chaque destination.
À retenir : l'éditeur est un DOM que vous pouvez voir – résume le mécanisme et comment l'éditeur HTML WYSIWYG de ToolAcre expose le balisage produit par votre formatage, sans quitter le navigateur.
L'éditeur est un DOM que vous pouvez voir et inspecter. L'éditeur HTML WYSIWYG de ToolAcre vous offre un moyen direct de comparer une action de formatage visuel avec le HTML filtré qu'elle produit, localement dans votre navigateur. Tapez et mettez en gras une note jetable, passez en mode source et conservez uniquement les éléments réellement pris en charge par votre destination.