Outils de développement · Éditeur HTML WYSIWYG
Pourquoi execCommand est obsolète et ce que les éditeurs de navigateur utilisent à la place
· Comment ça marche
html contenu modifiable flux de travail du développeur
Couvre l'ascension et la chute de document.execCommand, pourquoi sa sortie était incohérente et comment les éditeurs modernes s'appuient plutôt sur Selection, Range et beforeinput.
Le bouton gras d'une ligne qui n'est plus sûr — s'ouvre avec execCommand('bold') et l'avertissement de dépréciation
Un bouton en gras peut être un appel : concentrez la surface d'édition, puis demandez à `document.execCommand` d'appliquer `bold` à la sélection actuelle. ToolAcre utilise toujours ce chemin car le navigateur possède le curseur et la plage sélectionnée à l'intérieur de son élément contenteditable. L'appel compact est pratique, mais la commodité ne rend pas l'arbre résultant prévisible.
Le code considère le refus comme une possibilité ordinaire. Son wrapper de commande détecte une exception, annonce que le navigateur a refusé l'action et dirige l'écrivain vers le mode source. Cette solution de rechange est plus honnête que de promettre qu'un clic sur la barre d'outils produit toujours un élément particulier ou fonctionne de manière identique dans chaque moteur.
Ce qu'a fait execCommand et d'où il vient - explique son origine au début d'Internet Explorer et son adoption par tous les navigateurs
Le même wrapper gère les listes grasses, italiques, non ordonnées et ordonnées, la suppression du formatage, l'annulation, le rétablissement, le formatage des blocs, les liens et la dissociation. Ce sont les commandes réellement présentes dans la barre d'outils ; cet article n'étend pas la liste avec l'alignement, les couleurs, les polices, les tableaux, les images ou d'autres fonctionnalités de texte enrichi familières que l'implémentation n'expose jamais.
Chaque commande s'exécute sur le DOM modifiable en direct. Ensuite, le panneau actualise sa source, son aperçu, son nombre de mots et son rapport de suppression à partir du innerHTML actuel. Le résultat enregistré n'est donc pas un journal de commandes. Il s'agit d'une sérialisation filtrée de la structure laissée par le navigateur après avoir effectué ou refusé l'opération demandée.
Pourquoi l'API de commande est obsolète : les navigateurs peuvent produire différentes formes DOM
La dépréciation est importante car l'API ne donne pas à un éditeur-auteur un contrat structurel précis pour chaque mutation. Les limitations de ToolAcre avertissent explicitement que le comportement diffère entre les moteurs, en particulier autour des listes imbriquées. Une liste visible peut être acceptable alors que ses choix d'imbrication ou de wrapper diffèrent du balisage produit par un autre navigateur.
Aucune source de référentiel ne permet d'affirmer que chaque navigateur, version ou commande a un résultat de compatibilité particulier. L'instruction safe est plus étroite : cette implémentation appelle l'API obsolète, détecte les refus et propose une édition directe de la source comme trappe de secours. Testez le navigateur et l'opération que vous comptez utiliser plutôt que d'extrapoler une matrice.
Selection et Range sont des alternatives pertinentes, mais cet outil ne les implémente pas
Selection et Range peuvent décrire les limites du DOM sélectionnées et prendre en charge la manipulation explicite de l'arborescence, mais ToolAcre n'implémente pas de moteur de formatage de remplacement avec elles. Nommer ces API comme s’il s’agissait du chemin de code actuel décrirait mal le produit. Ici, la commande du navigateur reste le mutateur et le désinfectant reste la limite de sortie.
Un modèle personnalisé peut posséder des marques, des blocs, des transactions et un mappage de sélection, mais il s'agit d'une architecture de produit différente avec des tests différents. Cet éditeur léger évite délibérément de revendiquer de telles machines. Son contrat révisable est que les actions visuelles peuvent créer un DOM dépendant du navigateur, tandis que le mode source révèle le balisage filtré qui sera réellement copié ou téléchargé.
beforeinput ne fait pas partie du chemin de formatage de cet éditeur
L'implémentation n'intercepte pas non plus `beforeinput` pour traduire les intentions d'édition en transactions personnalisées. Les événements d'entrée déclenchent simplement une actualisation une fois que le navigateur a modifié la surface. Le collage et le dépôt sont des exceptions : ces événements sont empêchés, leur charge utile de presse-papiers ou de transfert est filtrée et seul le HTML ou le texte brut résultant est inséré.
Cette distinction empêche une vaste revendication architecturale. ToolAcre possède la porte de collage mais pas toutes les mutations de frappe. La saisie ordinaire, la suppression, le comportement de saisie et les commandes de la barre d'outils restent des opérations d'édition du navigateur. Le désinfectant examine leur sortie sérialisée ; il ne transforme pas l'éditeur en un cadre axé sur les entrées préalables et ne normalise pas chaque mutation intermédiaire du DOM.
Exemple concret : inspectez le résultat de la commande héritée que cet éditeur produit réellement
Pour une vérification concrète, tapez deux phrases courtes, sélectionnez une phrase et appuyez sur Gras. Basculez vers la source HTML et inspectez l’élément autour de cette phrase. ToolAcre mappe l'ancien `b` à `strong` pendant la désinfection, de sorte que le résultat filtré peut être sémantique même lorsque la commande d'édition en direct a initialement choisi une balise héritée.
Répétez avec une liste, puis annulez. La barre d'outils envoie `insertUnorderedList` et `undo` ; il ne conserve pas d'historique d'application distinct. Si le navigateur refuse, la région d'état l'indique. Si l'imbrication semble étrange, le mode source est le chemin de correction pris en charge. La sortie observée, et non l’étiquette du bouton, en est la preuve.
Ce que cela ne couvre pas : aucune architecture d'éditeur de remplacement n'est implémentée ici
Cet article ne revendique pas la prise en charge d'un système de commande de remplacement moderne, de transactions collaboratives, d'arborescences déterministes entre navigateurs ou d'une pile d'annulation personnalisée. Il ne déduit pas non plus le comportement des raccourcis clavier, car la source définit les actions de la barre d'outils, et non un registre de raccourcis. Les fonctionnalités non prises en charge restent des omissions plutôt que des capacités implicites.
La sécurité est distincte du choix des commandes. Les filtres de liste autorisée émettent du balisage et l'aperçu est mis en bac à sable sans scripts, mais le désinfectant décline explicitement son utilisation comme filtre XSS général à entrée hostile. Un serveur acceptant du contenu de publication non fiable a toujours besoin d'un analyseur HTML5 côté serveur approprié et d'une politique spécifique à la destination.
À retenir : possédez le DOM, pas la commande - résume le chemin de migration et comment le balisage résultant est ce que vous inspectez dans un outil WYSIWYG vers HTML
Possédez le résultat que vous pouvez inspecter. Dans cet éditeur, une commande demande au navigateur de muter une arborescence modifiable, puis la liste verte réécrit la sérialisation de cette arborescence dans le sous-ensemble pris en charge. Le mode source expose le transfert et fournit une surface de réparation pratique lorsque le comportement d'édition du navigateur est gênant ou incohérent.
Utilisez un échantillon jetable dans le même navigateur que votre travail réel. Exercez uniquement les commandes fournies, inspectez les liens et l'imbrication, testez l'annulation avant de vous y fier et copiez le HTML filtré uniquement après l'avoir lu. Ce flux de travail respecte la dépréciation sans prétendre que ToolAcre a déjà remplacé l'API d'édition sous-jacente.