devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Audit du site

Nettoyeur HTML pour Webflow Rich Text

Collez du HTML désordonné (ancien site, export WordPress, Google Docs ou Word) et obtenez un balisage sémantique propre, accepté par l’élément Rich Text de Webflow et par l’import CMS sans résidus.

Mis à jour le
Aperçu nettoyé

HTML nettoyé (import CSV / API)


    
 Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

    
devpack.app est un outil indépendant, non affilié à Webflow, Inc. ni à Figma, Inc., et n’est ni sponsorisé ni approuvé par eux. Webflow et Figma sont des marques de leurs propriétaires respectifs.

    
    

      
Comment utiliser : HTML vers Webflow Rich Text
  1. Collez le code HTML source, ou copiez le texte mis en forme depuis Google Docs, Word ou une page web, puis collez-le directement dans la zone (la mise en forme est récupérée en HTML).
  2. L’outil supprime les classes, identifiants, styles inline, attributs data et conteneurs de mise en page, et convertit le gras et l’italique en <strong> et <em>.
  3. Cliquez sur Copier le texte enrichi et collez dans un élément Rich Text ou un champ CMS de Webflow, ou copiez le HTML nettoyé pour un import CSV.


Pourquoi nettoyer le HTML avant un import dans Webflow ?


L’élément Rich Text de Webflow prend en charge un ensemble restreint de balises : titres, paragraphes, liens, gras, italique, listes, citations, images, figures et sauts de ligne. Le contenu migré depuis WordPress ou un autre CMS, ou copié depuis Google Docs et Word, arrive enveloppé de <div> et de <span> avec des classes, des styles inline (font-family, color, font-size), des attributs data-* et des paragraphes vides. Importé tel quel, ce code parasite écrase la typographie de votre site Webflow, crée des espacements incohérents et alourdit le CMS.


Ce que fait le nettoyeur


    

  • Supprime toutes les classes, tous les id, styles et attributs data (conserve href/target/rel sur les liens et src/alt sur les images).
    • 

  • Retire les conteneurs div, span, section, font et similaires ; transforme les div ne contenant que du texte en paragraphes.
    • 

  • Convertit la mise en forme de Google Docs et Word (font-weight:700, font-style:italic) en balises sémantiques <strong> et <em>.
    • 

  • Supprime les scripts, iframes, formulaires et SVG ; convertit éventuellement les H1 en H2 (le titre de la page est généralement le H1) et supprime les paragraphes vides et les &nbsp;.
    • 



Migrations en masse


Pour un blog complet, nettoyez le corps de chaque article puis importez-le via l’import CSV du CMS de Webflow ou via l’API : les deux acceptent le HTML pour les champs Rich Text. Vous rédigez de nouveaux contenus en Markdown ? Utilisez plutôt Markdown vers Webflow Rich Text.
Aussi recherché comme : webflow rich text, nettoyer html webflow, supprimer classes html, supprimer styles inline, import cms webflow, google docs vers webflow, wordpress vers webflow.
Outils complémentaires : HTML vers Webflow Rich Text
  • HTML vers Markdown — Collez du HTML, ou copiez du texte enrichi directement depuis une page web, un Google Doc ou un e-mail, puis obtenez un Markdown soigné à intégrer dans un README, un wiki ou un site statique.
  • Formateur HTML — Collez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y compris les blocs <style> et <script> intégrés.
  • SVG vers Webflow — Collez un SVG depuis Figma et copiez-le dans Webflow sous forme de véritables Custom Elements : chaque <svg>, <path> et <g> devient un élément que vous pouvez sélectionner, classer et modifier dans le Navigator.
  • Guillemets courbes en droits — Le code copié depuis Slack, Notion, Word ou un blog ne fonctionne pas ?
Questions fréquentes
Pourquoi le texte collé dans Webflow garde-t-il une mauvaise police ?
Le contenu copié depuis Docs, Word ou d’autres sites contient souvent des styles inline. Nettoyez-le d’abord ici pour que les styles Rich Text de Webflow s’appliquent.
Webflow Rich Text prend-il en charge les tableaux ?
Pas nativement. Par défaut, les tableaux sont remplacés par une note. Ajoutez-les de nouveau avec un élément Embed à l’intérieur du rich text.
Les images sont-elles conservées ?
Les balises d’image sont conservées (src et alt uniquement). Pour un meilleur résultat, importez les images dans les Assets de Webflow afin qu’elles bénéficient de tailles responsives.
Puis-je utiliser le HTML pour l’API Webflow ou l’import CSV ?
Oui. Copiez le HTML nettoyé et placez-le dans la colonne du champ Rich Text ou dans le payload de l’API.
Puis-je installer HTML vers Webflow Rich Text en tant qu’application web et l’utiliser hors ligne ?
Oui. HTML vers Webflow Rich Text est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

      
    

    
    
Outils similaires
localMarkdown vers Webflow Rich TextCollez du Markdown, vérifiez l’aperçu et copiez-le en texte mis en forme : titres, listes, liens et gras…localHTML vers MarkdownCollez du HTML, ou copiez du texte enrichi directement depuis une page web, un Google Doc ou un e-mail,…localFormateur HTMLCollez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y…localSVG vers WebflowCollez un SVG depuis Figma et copiez-le dans Webflow sous forme de véritables Custom Elements : chaque…localGuillemets courbes en droitsLe code copié depuis Slack, Notion, Word ou un blog ne fonctionne pas ? Les guillemets typographiques,…localGénérateur d’échelle typographiqueChoisissez une taille de police de base et un ratio (seconde mineure, tierce majeure, quarte juste, nombre…