Quand vous passez de l’ancien éditeur d’articles au nouvel éditeur, il est possible que vous voyiez des problèmes de style de tableau.

Cet article explique comment résoudre les problèmes courants après la migration vers le nouvel éditeur.

Cet article aborde les sujets suivants :

  • Comment réparer une table <figure> éléments
  • Comment résoudre les problèmes de format de l’en-tête de tableau et du format au niveau de l’en-tête
  • Comment résoudre les problèmes de format et d’alignement des tableaux

Comment réparer une table <figure> éléments

Le nouvel éditeur d’articles utilise <figure> pour fournir un style et des fonctionnalités cohérents et homogènes pour les différents navigateurs et plateformes. Ce comportement fait partie de l’architecture du module complémentaire de tableau du nouvel éditeur. Cela peut poser des problèmes de style, par exemple une hauteur de tableau restreinte ou des problèmes de format indésirables. Cette section explique ce qui se produit et comment l’éviter ou y remédier.

Important : Sauvegardez vos feuilles de style CSS et votre contenu avant d’effectuer des modifications importantes.

Le nouvel éditeur d’articles termine les tableaux en <figure class="table"> et peuvent appliquer des styles intégrés qui remplacent les classes personnalisées.

Pour résoudre ce problème, rétablissez les styles de votre tableau :

  1. Mettez à jour vos sélecteurs CSS pour cibler le nouveau balisage :
    • figure.table table { /* your table styles */ }
    • figure.table th, figure.table td { /* cell styles */ }
  2. Utiliser !important juste pour remplacer les styles incorporés si besoin est
  3. Tester vos modifications dans un article en double avant de les appliquer à l’ensemble du site

Pour éviter ou résoudre les problèmes de retour à la ligne :

  • Vérifiez la feuille de style CSS de votre centre d’aide pour vous assurer que <figure class="table"> Les éléments n’ont pas de styles limités, comme les paramètres de hauteur maximale ou de débordement.
  • Si vous rencontrez des problèmes de style, mettez votre CSS à jour pour cibler <figure class="table"> comme illustré
    figure.table {
    max-height: none;
    overflow: visible;
    }
  • Si vous effectuez la migration du contenu, ne le supprimez pas. <figure> marqueurs manuellement. Il est possible que le nouvel éditeur d’articles les ajoute à nouveau quand vous modifiez le contenu.
Remarque : Ces conseils sont basés sur les connaissances générales des produits et ne sont pas explicitement présents dans les tickets d’origine. Le nouvel éditeur d’articles s’appuie sur <figure> par leur design, pour garantir la assistance en charge des fonctionnalités et l’homogénéité. La personnalisation CSS de votre centre d’aide est l’approche recommandée pour résoudre les problèmes de style, plutôt que d’essayer de modifier le code HTML de sortie de l’éditeur.

Comment résoudre les problèmes de format de l’en-tête de tableau et du format au niveau de l’en-tête

Problèmes de format courants après la migration :

  • Les en-têtes de tableau peuvent perdre leur couleur d’arrière-plan ou leurs styles
  • Les cellules de l’en-tête de tableau peuvent être converties de façon incorrecte en texte H2
  • Les tailles H2 et H3 peuvent sembler différentes en raison de modifications des feuilles de style CSS par défaut ou personnalisées.
  • L’éditeur ne peut pas enregistrer les modifications du tableau comme prévu

Pour vous assurer que les en-têtes des tableaux s’affichent correctement après la migration :

  1. Dans le thème de votre centre d’aide , ajoutez des règles CSS qui ciblent <thead> ou <th> , par exemple :
    thead { background-color: #f5f5f5; }
    th { background-color: #f5f5f5; }
  2. Conserver ou mettre à jour les paramètres existants <th> différents styles pour assurer la cohérence

Pour définir des en-têtes de tableaux dans le nouvel éditeur d’articles :

  1. Dans l’article, sélectionnez votre tableau, puis cliquez sur la ligne du haut
  2. Dans la liste déroulante Ligne , activez l’option Ligne d’en-tête
    • Si l’option de ligne d’en-tête est manquante, ajoutez manuellement <thead> et <th> dans votre code HTML source, ou vérifiez les options d’édition ou de module complémentaire disponibles dans votre nouvel éditeur d’articles.

Si les styles H2 ou H3 sont incorrects

Niveaux d’en-tête de révision et de mise à jour :

  1. Modifier l’article dans le nouvel éditeur d’articles
  2. Sélectionnez le texte d'en-tête de tableau que l'éditeur a converti en H2
  3. Remplacez son format par le style correct, par exemple en-tête de tableau ou texte normal

Ajuster les tailles au niveau de l’en-tête avec CSS :

  1. Accéder à Administrateur de Connaissances > Panneau de personnalisation > Personnaliser > Modifier le code > style.CSSPersonnalisez votre thème
  2. Mettez le code CSS à jour pour vous assurer que les styles H2, H3 et similaires correspondent aux tailles souhaitées
  3. Utilisez la fonctionnalité Aperçu pour vérifier le format final avant de cliquer sur Publier

Si l’éditeur n’enregistre pas les modifications de votre tableau ou si vous voyez des erreurs indiquant qu’aucune modification n’a été apportée :

  1. Essayez de reproduire le problème
  2. Capturez un fichier HTTP Archive (HAR) et une capture d’écran.
  3. Contactez l’Assistance client Zendesk pour obtenir de l’aide.

Pour en savoir plus, consultez les articles suivants :

  • Correction du style des tableaux lors du passage au nouvel éditeur d’article
  • Ajout et formatage des tableaux dans les articles du centre d’aide
Conseil : Si vous avez beaucoup d’articles à mettre à jour, envisagez d’utiliser un script par lots ou un outil de migration pour normaliser les niveaux d’en-tête et les styles, et sauvegardez toujours vos articles avant d’effectuer des modifications en masse. S’il manque certaines fonctionnalités de tableau dans votre nouvel éditeur d’articles, recherchez les plug-ins disponibles ou contactez l’administrateur de votre plateforme pour des améliorations.

Comment résoudre les problèmes de format et d’alignement des tableaux

Problèmes courants après la migration :

  • Les styles de tableau personnalisés pour la largeur et les bordures ne s’appliquent plus comme auparavant
  • Taille du texte et espace des cellules incohérents
  • Les classes de tableau et les styles de bordures ont changé pendant une migration
  • Lignes d’en-tête séparées <thead> et <tbody>, ce qui provoque des incohérences de style

Pour résoudre ces problèmes :

  • Mettre à jour les feuilles de style CSS de votre centre d’aide pour cibler les éléments du tableau
    .article-body td, .article-body th {
    padding: 20px;
    font-size: 16px;
    }
  • Corriger l’alignement du tableau
    • Utilisez les options d’alignement des tableaux du nouvel éditeur d’articles. Il est possible que le nouvel éditeur d’articles ait moins de fonctionnalités que l’ancien éditeur.
    • Si les tableaux centrent chaque fois ou que l’alignement ne fonctionne pas, ajoutez ou modifiez les feuilles de style CSS :
      .article-body table {
      margin-left: 0 !important;
      margin-right: auto !important;
      }
  • Gérer l'espacement et l'alignement des cellules du tableau
    • Supprimez les styles intégrés inutiles qui définissent l’espace des cellules de façon à ce que votre thème CSS contrôle cette propriété
    • Définissez l’espace de cellule souhaité dans le code CSS de votre thème
  • Ajuster les classes, les bordures et les en-têtes des tableaux
    • Mettre à jour les règles CSS pour toutes les classes de tableau nouvelles ou modifiées, par exemple .nonItemList
    • Vérifiez que toutes les lignes d’en-tête sont à l’intérieur <thead> pour un style correct
    • Déplacez les lignes d’en-tête de <tbody> à <thead> en fonction de vos besoins
  • Tester et vérifier les modifications
    • Consultez l’aperçu des articles concernés dans le nouvel éditeur d’articles pour confirmer le formatage.
    • Répétez la procédure pour chaque article avec des tableaux personnalisés, car une révision manuelle peut être nécessaire.

Pour en savoir plus, consultez Passage au nouvel éditeur d’articles.

Traduction - exonération : cet article a été traduit par un logiciel de traduction automatisée pour permettre une compréhension élémentaire de son contenu. Des efforts raisonnables ont été faits pour fournir une traduction correcte, mais Zendesk ne garantit pas l’exactitude de la traduction.

Si vous avez des questions quant à l’exactitude des informations contenues dans l’article traduit, consultez la version anglaise de l’article, qui représente la version officielle.

Réalisé par Zendesk