Outils de développement · Éditeur HTML WYSIWYG
Que se passe-t-il lorsque vous collez un document Word ou Google Docs dans un éditeur Web
· Comment ça marche
html contenu modifiable nettoyage de texte
Explique ce que contiennent les collages de texte enrichi, des styles mso aux éléments d'emballage et aux piles de polices, et montre comment lire le balisage résultant avant qu'il n'atteigne votre site.
Cela avait l'air bien dans Word — s'ouvre sur un article collé dont l'espacement et les polices contredisent la conception du site
Un paragraphe copié à partir d'un traitement de texte peut paraître soigné à la source et arriver avec des polices, des espacements et des wrappers qui entrent en conflit avec un site. ToolAcre ne conserve pas cette présentation en gros. Son écouteur de collage intercepte l'opération avant que le balisage riche d'origine ne soit inséré et choisit à la place une représentation filtrée.
La preuve importante est la vue source, et non la question de savoir si la première impression visuelle ressemble au document original. L'éditeur est intentionnellement étroit : les titres, paragraphes, emphases, listes, citations, éléments de type code et liens peuvent survivre, tandis que les conteneurs de mise en page, les noms de classe, les identifiants et les attributs de style en ligne n'appartiennent pas à son contrat de sortie.
Le presse-papiers contient plus que du texte : explique qu'une copie de texte enrichi inclut une saveur HTML aux côtés du texte brut
Un presse-papiers peut exposer `text/html` et `text/plain` pour une opération de copie. Le gestionnaire demande les deux. Lorsqu'une charge utile HTML existe, elle nettoie cette chaîne et insère le fragment réécrit avec `insertHTML` ; ce n'est que lorsque le HTML riche est absent qu'il insère la charge utile simple avec `insertText`.
Cette priorité est prouvée par le code pour ce panneau, et non une déclaration universelle pour chaque application. Cela explique pourquoi une pâte riche peut conserver une liste tout en perdant son apparence. L'application source a écrit le HTML du presse-papiers, mais la liste blanche de ToolAcre décide quelle partie est admise sur la surface modifiable.
Ce que cet éditeur supprime du collage enrichi : éléments, attributs et commentaires non pris en charge
Les éléments non pris en charge sont traités de deux manières. Les wrappers ordinaires inconnus sont déballés afin que leurs mots restent, tandis que les scripts, styles, iframes, formulaires, SVG, MathML et autres conteneurs risqués ou non-éditeurs sont supprimés avec leur contenu. Les commentaires et les doctypes sont également supprimés plutôt que intégrés dans le brouillon.
Les attributs font face à une deuxième porte. Les attributs de classe, d'identifiant, de style, de données et chaque gestionnaire d'événements sont supprimés car les attributs autorisés sont nommés par élément. Cela signifie que les noms de classe spécifiques à la source et la présentation en ligne ne peuvent pas lutter contre la feuille de style de destination une fois que ToolAcre a filtré la pâte, bien que le style source utile puisse également disparaître.
Pourquoi les wrappers et styles spécifiques à la source ne survivent pas à la liste autorisée
Le référentiel ne fournit pas d'appareils Word ou Google Docs capturés, donc cet article n'invente pas de classes `mso-` exactes, d'identifiants internes ou de séquences wrapper pour des versions particulières. Il peut énoncer la conséquence prouvée par la liste autorisée : les classes et les styles sont supprimés quelle que soit l'application source qui les a fournis.
Cette règle indépendante de la source constitue une orientation éditoriale plus solide qu'un catalogue fragile. Inspectez l’avis de suppression après le collage. Il enregistre des raisons uniques telles qu'un wrapper non pris en charge, un attribut interdit ou une URL rejetée. Le rapport vous indique ce que cette implémentation a rejeté sans prétendre identifier l'application qui a généré à l'origine chaque fragment.
Exemple concret : collez trois paragraphes et lisez le balisage filtré
Copiez trois courts paragraphes, en mettant la phrase du milieu en gras et la dernière en liste. Après le collage, passez en mode source. Les éléments paragraphe, strong, ul et li se trouvent dans la liste autorisée, tandis que les div environnants sont déballés et les attributs de style disparaissent. Les balises héritées b et i se normalisent en strong et em.
Ajoutez maintenant un attribut d'événement non sécurisé dans un échantillon source jetable et revenez en mode visuel. L'attribut est supprimé avant que cette source ne devienne DOM. Cela démontre une limite d'édition, et non une publication sûre des soumissions hostiles. Le projet met explicitement en garde contre les différences entre les analyseurs et nécessite un désinfectant approprié côté serveur pour le contenu non fiable.
Le collage de texte brut est utilisé uniquement lorsque le presse-papiers ne fournit aucune saveur HTML.
L'insertion de texte brut est une solution de secours et non une commande « coller sans formatage » sélectionnable par l'utilisateur dans cette barre d'outils. Si le presse-papiers fournit du HTML, ToolAcre prend cette branche. Un raccourci de navigateur ou de système d'exploitation peut exposer un collage simple, mais le référentiel ne définit ni ne promet de comportement de raccourci spécifique.
Lorsque seul le texte est disponible, `insertText` demande au navigateur de placer ces caractères au niveau du curseur. Toute structure de paragraphe créée par la suite reste soumise au comportement d'édition du navigateur. Utilisez la vue source pour ajouter des titres ou des listes délibérés plutôt que de supposer que les sauts de ligne d'une autre application deviennent automatiquement la structure attendue par votre CMS.
Ce que cela ne couvre pas : règles de nettoyage automatique, filtres de collage spécifiques au CMS ou préservation du suivi des modifications
Ce flux de travail ne conserve pas le suivi des modifications, des commentaires, de la mise en page, des polices, des couleurs, des tableaux ou des images. Les images sont délibérément absentes car une image autorisée crée une requête sortante et une surface de gestionnaire d'erreurs. L'éditeur ne dispose pas non plus d'un profil de nettoyage ou d'un commutateur spécifique à la source qui promet la fidélité à une suite bureautique.
Le collage local ne prouve pas que la destination finale acceptera le même sous-ensemble. Un CMS peut supprimer davantage de balises, réécrire des liens ou appliquer sa propre politique. Comparez la sortie de l'éditeur avec la documentation de destination et conservez une copie originale lorsque la perte d'un formatage non pris en charge supprimerait des informations plutôt qu'une simple présentation.
À retenir : regardez avant de publier - résume l'habitude d'inspection et comment l'éditeur HTML WYSIWYG de ToolAcre vous permet de coller localement et de voir le balisage avant qu'il ne soit envoyé n'importe où.
Recherchez avant de publier : collez un fragment représentatif et non sensible, lisez l'avertissement de suppression, examinez la source et prévisualisez le résultat filtré. ToolAcre donne une liste blanche explicite plutôt que de transférer silencieusement une présentation étrangère sur votre site. Cela rend le nettoyage visible, mais cela ne certifie pas que le HTML arbitraire est sûr.
Si la structure essentielle a disparu, reconstruisez-la avec des titres, des paragraphes, des listes, des emphases et des liens pris en charge. Si la cible accepte moins, simplifiez davantage. L’artefact correct n’est pas l’imitation visuelle la plus proche du document source ; il s'agit d'un balisage revu dont le sens et la politique de destination sont tous deux compris.