L’éditeur de code source vous permet de modifier le code source HTML des articles et des blocs de contenu du centre d’aide. Cela vous permet de personnaliser et de styliser le contenu du centre d’aide de manières qui ne sont pas possibles avec l’éditeur WYSIWYG standard.
Modification du code source des articles
Vous pouvez personnaliser les articles de votre centre d’aide en utilisant l’éditeur de code source pour modifier les éléments HTML de vos articles.
- Dans le centre d’aide ou le volet Guide Admin, créez ou modifiez un article ou un bloc de contenu.
- Dans l’article ou le bloc de contenu, cliquez sur l’icône du code source (
) dans la barre d’outils. - Dans l’éditeur de code source, créez ou modifiez le code source que vous voulez utiliser. Pour une liste des éléments pris en charge, consultez HTML pris en charge pour les articles du centre d’aide.
- Cliquez sur Appliquer pour enregistrer vos modifications et fermer la vie du code source.
Nettoyage des styles dans le code source des articles
Quand vous copiez et collez du contenu d’une page HTML dans votre article, il peut arriver que des styles indésirables viennent encombrer le code source de votre article et compromettre la cohérence de votre centre d’aide. Vous pouvez utiliser le bouton Nettoyer les styles de l’éditeur de code source pour supprimer les styles intégrés qui ne sont pas essentiels au fonctionnement de l’éditeur d’article. Le bouton Nettoyer les styles n’affecte pas les classes CSS ou les thèmes, ni les styles incorporés nécessaires à l’éditeur d’article (par exemple, le premier plan et l’arrière-plan des polices et la hauteur et la largeur des cellules des tableaux).
- Dans le centre d’aide ou le volet Guide Admin, créez ou modifiez un article ou un bloc de contenu.
- Dans l’article ou le bloc de contenu, cliquez sur l’icône du code source () dans la barre d’outils.
L’éditeur de code source s’ouvre et affiche tout le code et tous les styles intégrés.
- Dans l’éditeur de code source, cliquez sur Nettoyer les styles.
Les styles intégrés non pris en charge sont supprimés de la vue du code source.
- Cliquez sur Appliquer pour enregistrer vos modifications et fermer la vie du code source.
- Cliquez sut Save pour enregistrer vos modifications.
Considérations importantes pour la modification du code source
Éléments de conteneurs HTML vides
Zendesk supprime automatiquement la plupart des éléments de conteneurs vides, comme i ou span. De manière générale, ces éléments doivent contenir du contenu pour être rendus. Zendesk ne supprime pas les marqueurs p vides. À la place, Zendesk insère comme contenu de l’élément. Exemple :
<p> </p>HTML non sécurisé
Par défaut, Zendesk considère les éléments HTML suivants comme non sécurisés.
applet, button, embed, form, input, object, script, textarea, styleTraitement du code HTML non sécurisé dans les articles
Pour les articles, l’éditeur de code source ne supprime pas les éléments HTML non sécurisés ni les attributs HTML non pris en charge. À la place, ils sont exclus des réponses HTTP utilisées pour rendre les articles du centre d’aide. Par conséquent, les articles risquent de ne pas s’afficher comme prévu.
Code HTML non sécurisé dans les articles
Vous pouvez ignorer les paramètres par défaut pour autoriser les éléments HTML non sécurisés dans les articles du centre d’aide.
Attention : si vous procédez ainsi, du code malveillant risque de s’exécuter lorsque des utilisateurs ouvrent un article dans un navigateur.
Pour autoriser du code HTML non sécurisé dans les réponses HTTP
- Dans Guide, cliquez sur l’icône Paramètres (
) dans la barre latérale. - Sous Sécurité, sélectionnez l’option Afficher le contenu non sécurisé.
- Cliquez sur Mettre à jour.
Traitement du code HTML non sécurisé dans les blocs de contenu
Pour les blocs de contenu, l’éditeur de code source supprime les éléments HTML non sécurisés et les attributs non pris en charge. Le contenu d’un élément non sécurisé est placé dans un élément p comme expliqué dans HTML inconnu.
HTML inconnu
Les éléments HTML non pris en charge sont considérés comme inconnus. Le contenu HTML non pris en charge est traité différemment si vous modifiez un bloc de contenu ou un article du centre d’aide.
Si vous modifiez un bloc de contenu, les blocs HTML reconnaissent le contenu non pris en charge et le placent dans un bloc HTML. Vous pouvez cliquer sur le bloc HTML dans l’éditeur de bloc de contenu pour ouvrir un éditeur de code source qui affiche uniquement le code pour ce bloc. Vous pouvez utiliser cette vue pour manipuler le bloc HTML pour votre contenu sélectionné sans avoir à faire défiler le code source de la totalité du bloc de contenu. Consultez Utilisation des blocs HTML pour modifier le code dans les blocs de contenu.
mytag inconnu.<mytag>Hello world!</mytag>L’élément mytag est supprimé des réponses HTTP utilisées pour rendre le centre d’aide. Son contenu est placé dans un élément p.
<p>Hello world!</p>Stylisation du code HTML dans les articles d’aide
Dans la mesure du possible, Zendesk conseille d’utiliser l’attribut class et les classes CSS connexes pour la stylisation du code HTML dans les articles du centre d’aide. Les classes CSS doivent être définies dans le thème du centre d’aide. Pour en savoir plus, consultez Personnalisation du thème de votre centre d’aide.
Quand vous créez des règles CSS pour le thème de votre centre d’aide, évitez d’utiliser des sélecteurs imbriqués comme div.container > p > img. Ces types de règles sont difficiles à maintenir et peuvent cibler des éléments qui ne devraient pas l’être. Utilisez plutôt des sélecteurs qui stylisent directement une classe, comme .container-image. Puis ajoutez directement la classe aux éléments HTML affectés en utilisant l’élément class. Exemple :
Évitez d’utiliser l’attribut style pour appliquer un style incorporé aux éléments HTML. Le style incorporé est difficile à maintenir et peut déboucher sur des incohérences.