Mon édition
Suite Team, Growth, Professional, Enterprise ou Enterprise Plus
Support avec Guide Professional ou Enterprise

Zendesk a introduit un nouvel éditeur d’article au deuxième trimestre 2025. La transition de l’ancien au nouvel éditeur se fera en quatre étapes et se terminera au premier trimestre 2026. Le nouvel éditeur d’article apporte des améliorations et des modifications, notamment le style des tableaux aux niveaux HTML et CSS.

Comme le nouvel éditeur n’est pas 100 % compatible avec l’ancien éditeur, il est possible que vous rencontriez des problèmes courants liés aux tableaux pendant ou après la mise à niveau. Cet article explique aux administrateurs et aux développeurs de thèmes comment gérer ces problèmes et trouver des solutions alternatives pour s’assurer que les tableaux respectent le style de leur marque.

Remarque – Si vous rencontrez d’autres problèmes ou trouvez d’autres solutions, ajoutez-les dans la section des commentaires à la fin de cet article.
Cet article aborde les sujets suivants :
  • Modifications du style des tableaux dans le nouvel éditeur
  • Exemples de conversions des tableaux pendant la mise à niveau
  • Problèmes courants et comment y remédier
  • Meilleures pratiques pour les développeurs de thèmes et les administrateurs

Modifications du style des tableaux dans le nouvel éditeur

Le plus grand changement concernant les tableaux dans le nouvel éditeur d’article est l’utilisation de styles CSS intégrés, appliqués directement aux éléments des tableaux (par exemple, <table>, <tr> et <td>), au lieu d’utiliser les attributs HTML ou les classes CSS externes pour appliquer des styles aux tableaux. Les nouveaux tableaux sont désormais placés entre balises <figure>.

  • Dans l’ancien éditeur, les styles de tableau étaient appliqués en utilisant une combinaison d’attributs HTML (par exemple, cellpadding, border), et d’éléments CSS intégrés.

  • Dans le nouvel éditeur, la personnalisation des tableaux (comme la largeur et la couleur du cadre, la couleur d’arrière-plan, la hauteur/largeur des cellules, la couleur du texte et le remplissage) est appliquée uniquement sous la forme de styles CSS intégrés.

Les styles intégrés ont la spécificité CSS la plus élevée, ce que signifie que :

  • Vos styles CSS de thèmes personnalisés ciblant les tableaux ne peuvent pas remplacer ces styles intégrés, sauf si vos sélecteurs utilisent la spécificité égal/supérieur ou !important.

  • Pour les anciens thèmes et styles CSS qui ciblaient les sélecteurs d’éléments ou les attributs HTML sans spécificité, il est possible que les styles de tableaux soient corrompus ou appliqués de façon incohérente après le passage au nouvel éditeur.

Exemples de conversions des tableaux pendant la mise à niveau

Les exemples suivants illustrent les problèmes qui peuvent survenir lors de la conversion des tableaux pour le nouvel éditeur d’article.

Remplissage de cellule converti d’attribut en style intégré

L’ancien éditeur d’article utilise l’attribut [cellpadding] pour spécifier le remplissage et le nouvel éditeur utilise les styles intégrés. Les anciens styles qui ciblaient les attributs [cellpadding] ou les éléments qui attendaient cette propriété devront être ajustés pour pouvoir fonctionner.

HTML de l’ancien éditeur d’article
<table cellpadding="20">
HTML du nouvel éditeur d’article
<td style="padding: 20px;">

Modifications du traitement du cadre

Les exemples suivants illustrent la façon dont sont traités les cadres des tableaux dans l’ancien éditeur, le nouvel éditeur et les anciens articles convertis pour le nouvel éditeur.

HTML généré par l’insertion d’un tableau dans l’ancien éditeur
<table style="border-collapse: collapse; width: 100%" border="1">
  <tbody>
    <tr>
      <td style="width: 50%">A</td>
      <td style="width: 50%">B</td>
    </tr>
    <tr>
      <td style="width: 50%">C</td>
      <td style="width: 50%">D</td>
    </tr>
  </tbody>
</table>
HTML généré par l’insertion d’un tableau dans le nouvel éditeur
<figure style="width: 100%" class="wysiwyg-table">
  <table style="border-style: solid; border-width: 1px">
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px">A</td>
        <td style="border-style: solid; border-width: 1px">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px">C</td>
        <td style="border-style: solid; border-width: 1px">D</td>
      </tr>
    </tbody>
  </table>
</figure>
HTML généré par la conversion d’un tableau de l’ancien au nouvel éditeur d’article
<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
  <table
    style="border-collapse: collapse; border-style: solid; border-width: 1px"
  >
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">A</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">C</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">D</td>
      </tr>
    </tbody>
  </table>
</figure>

Problèmes courants et comment y remédier

Cette section décrit plusieurs problèmes courants dus à la conversion des tableaux de l’ancien au nouvel éditeur, ainsi que la façon de les résoudre.

Le CSS du thème ne remplace pas les styles des tableaux (remplissage, cadres et couleurs)

Problème : votre CSS de thème personnalisé qui contrôlait auparavant les cadres, le remplissage de cellule ou les couleurs d’arrière-plan n’est pas appliqué, car l’éditeur utilise désormais les styles intégrés.

Solutions possibles :

  • Augmentez la spécificité CSS : utilisez des sélecteurs plus spécifiques pour cibler les éléments de tableau au sein de l’article. L’ajout de !important garantit que vos styles remplacent les styles intégrés.
    .article-body table,
    .article-body table td {
      border: 1px solid #ccc !important;
      padding: 10px !important;
      background-color: #f9f9f9 !important;
    }
    
  • Ciblez l’enveloppement des figures : l’éditeur enveloppe désormais les tableaux au sein des éléments <figure> avec des classes .wysiwyg-table. Personnalisez l’enveloppement en fonction de vos besoins :
    figure.wysiwyg-table {
      margin: 1em auto;
      max-width: 90%;
    }
    
  • Mettez à jour les styles qui utilisent des attributs HTML : si votre thème utilise des sélecteurs d’attributs (comme [cellpadding] ou [border]) pour le style des tableaux, mettez-les à jour pour cibler la nouvelle structure en utilisant des classes ou des styles intégrés.

Les tableaux n’ont pas le même aspect après la mise à niveau

Problème : les tableaux perdent leurs configurations de largeur ou d’alignement, ou vous voyez des cadres et des espacements inattendus.

Solutions possibles :
  • Le nouvel éditeur place le tableau à l’intérieur d’une balise <figure> avec une largeur intégrée. Il est possible que vous deviez modifier ou remplacer cette configuration.
    figure.wysiwyg-table {
      width: 100% !important;
      text-align: center;
    }
    figure.wysiwyg-table table {
      width: 100% !important;
      border-collapse: collapse;
    }
    
  • Vérifiez les styles par défaut table de votre thème et adaptez-les à votre nouvelle structure.

Les éléments HTML personnalisés ou complexes sont corrompus ou doivent être ajustés manuellement

Problème : si vous aviez des tableaux personnalisés avec des attributs inhabituels ou des styles intégrés personnalisés, il est possible que la mise à niveau de l’ancien au nouvel éditeur ne les traite pas correctement.
Remarque – Quand les tableaux de l’ancien éditeur ont été modifiés via le code source ou quand ils contiennent des éléments HTML que le nouvel éditeur ne prend pas en charge, le nouvel éditeur enveloppe le tableau à l’intérieur d’un bloc HTML. Quand cela se produit, vous ne pouvez pas utiliser le composant de tableau du nouvel éditeur d’article pour modifier les tableaux. Vous devez utiliser l’éditeur de code source pour mettre le bloc HTML à jour.

Solutions possibles :

  • Vérifiez le code source HTML de l’article migré pour les tableaux.
  • Modifiez ou réécrivez le code HTML personnalisé de façon à suivre le nouveau modèle :
    • Enveloppez la balise <table> dans une balise <figure class="wysiwyg-table">.
    • Utilisez les styles intégrés pour <table> et <td>.
  • Envisagez de recréer les tableaux complexes dans le nouvel éditeur pour garantir leur compatibilité.

Meilleures pratiques pour les développeurs de thèmes et les administrateurs

Utilisez les meilleures pratiques suivantes pour minimiser les problèmes lors de la migration des tableaux vers le nouvel éditeur d’article.
  • Utilisez des sélecteurs CSS spécifiques ciblant .wysiwyg-table, des tableaux à l’intérieur de .article-body ou des éléments figure pour envelopper les tableaux.
  • Utilisez !important avec précaution pour remplacer les styles intégrés.
  • Testez les tableaux dans plusieurs navigateurs et avec plusieurs tailles d’appareil, pendant et après la mise à niveau.
  • Prévenez les rédacteurs de contenu qu’il est possible que des styles intégrés soient utilisés et qu’ils doivent limiter la personnalisation des tableaux pour une maintenance facile.
  • Sauvegardez le thème de votre centre d’aide et le contenu de vos articles avant toute mise à niveau de masse ou personnalisation importante.
Réalisé par Zendesk