Cela vous est probablement déjà arrivé. Vous copiez un bloc joliment stylé — une carte de titre, un encadré coloré — et vous le collez dans l'éditeur WeChat ou un CMS. Parfois il arrive avec exactement le bon rendu. D'autres fois il atterrit en texte nu, tout le design retiré. Même action, résultat différent, et ça semble aléatoire. Ça ne l'est pas. La différence tient à si vous avez copié du HTML intégré.
Comprendre cette seule idée rend le collage de contenu stylé prévisible au lieu d'un pari.
Ce qu'est vraiment le HTML intégré
Le style web peut vivre à deux endroits. Sur un site normal, le style réside dans une feuille de style séparée, et le HTML ne fait que la référencer par nom de classe : <div class="title-card">. Le div n'a aucun sens en lui-même — le design vit dans un fichier CSS ailleurs.
Le HTML intégré place le style à l'intérieur de l'élément lui-même : <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Tout ce qu'il faut pour afficher le bloc voyage avec le bloc. Aucun fichier externe dont dépendre.
Cette distinction explique à elle seule pourquoi certains collages gardent leur design et d'autres non. Quand vous collez dans un éditeur, l'éditeur ne reçoit pas la feuille de style du site source. Si le design vivait dans cette feuille de style, il a disparu — vous obtenez la structure nue, c'est-à-dire du texte d'aspect ordinaire. Si le design était intégré, il vient avec, et le bloc s'affiche correctement.
Pourquoi WeChat et les éditeurs riches en ont besoin
L'éditeur de WeChat est strict. Il retire les feuilles de style externes et filtre beaucoup de style. Un bloc qui reposait sur une classe définie ailleurs n'a rien sur quoi se rabattre une fois à l'intérieur de WeChat. Beaucoup d'éditeurs de texte riche et de champs de collage de CMS se comportent pareil — ils assainissent ce que vous collez et ne gardent que les attributs intégrés.
La façon fiable de déplacer un bloc stylé dans ces éditeurs est donc de le copier en HTML intégré, où le style est autonome. Ainsi, même un éditeur strict a tout ce qu'il faut pour afficher le bloc tel qu'il a été conçu.
Comment fonctionne la copie d'un bloc « avec sa mise en forme »
Les navigateurs modernes ont une API Presse-papiers qui peut placer du contenu riche — du HTML avec sa mise en forme — dans le presse-papiers, pas seulement du texte brut. Quand un outil copie un bloc « en HTML intégré », il utilise cette API pour mettre le balisage autonome du bloc dans votre presse-papiers. Vous collez ensuite (Ctrl/Cmd+V) dans l'éditeur, et parce que le style était intégré et que le presse-papiers transportait le HTML, le bloc apparaît stylé.
Deux conditions doivent être réunies pour que cela fonctionne :
- Le balisage doit avoir des styles intégrés, pour qu'aucun fichier externe ne soit nécessaire.
- Le presse-papiers doit le transporter en HTML, pas comme un vidage en texte brut de chevrons.
Réussissez les deux et le collage « fonctionne tout seul ». Ratez l'un ou l'autre et vous obtenez du texte brut ou un mur de code visible.
Le faire sans éditer le code à la main
Vous pourriez, en principe, prendre un bloc stylé et intégrer chaque style à la main — déplacer les règles de chaque classe dans un attribut style="" sur chaque élément. Pour tout ce qui dépasse un bloc trivial, c'est fastidieux et source d'erreurs, surtout avec les cartes SVG dont le style est réparti sur de nombreux nœuds.
Un outil qui gère cela est plus simple. L'extracteur de modules de mise en page d'IMG.DIY extrait les blocs stylés du contenu WeChat collé et dote chacun d'un bouton de copie qui le met dans votre presse-papiers en HTML intégré via l'API Presse-papiers. Vous cliquez sur copier, passez à l'éditeur WeChat (ou à votre CMS, ou à un champ de texte riche), collez, et le bloc garde sa mise en forme. Aucune intégration manuelle, aucun balisage cassé à réparer.
Une liste rapide pour le collage
Quand un collage stylé tourne mal, passez ceci en revue :
- Avez-vous copié du HTML intégré, ou une capture d'écran / du texte brut ? Seul le HTML intégré se colle comme un bloc stylé fonctionnel.
- Collez dans le corps normal de l'éditeur, pas dans un mode « code source » ou « texte brut », qui peut retirer ou échapper le balisage.
- Vérifiez le bloc en aperçu. L'aperçu propre de WeChat montre comment le bloc s'affichera réellement sur un téléphone — confirmez-y avant de publier.
- Si les couleurs semblent fausses, recolorez avant de copier. Dans l'extracteur, vous pouvez cliquer une couleur et la changer partout dans le bloc, pour le copier déjà aux couleurs de votre marque.
Une limite honnête qui mérite d'être répétée : un outil comme celui-ci copie et organise des blocs — c'est un extracteur, pas un concepteur de modèles à partir de zéro, et il ne peut pas récupérer un article par URL (les navigateurs bloquent les requêtes intersites vers les pages WeChat, vous collez donc le contenu). Dans ces limites, le HTML intégré est ce qui permet à un bloc stylé de survivre au trajet d'un éditeur à l'autre avec son design intact.
Une fois que vous avez vu un bloc se coller parfaitement quelques fois, l'aléatoire précédent prend son sens : ce n'était jamais aléatoire. Il s'agissait toujours de savoir si le style voyageait à l'intérieur du bloc.