Appliquer des classes CSS dans Rich Text Editor Sitecore / Blogs / Perficient

Le texte enrichi dans Sitecore fait référence à la capacité du système de gestion de contenu (CMS) Sitecore à gérer et afficher du contenu texte formaté avec diverses options de style. Il permet aux éditeurs de contenu de créer et de gérer du contenu comprenant non seulement du texte brut, mais également une gamme d’éléments de formatage tels que des titres, des paragraphes, des listes, des liens, des images, etc. Cette fonctionnalité est bénéfique pour créer des pages Web attrayantes et visuellement attrayantes sans nécessiter de compétences techniques avancées. La liste déroulante Appliquer la feuille de style dans Sitecore RTE est une option assez conviviale permettant aux auteurs de contenu d’appliquer des styles/thèmes complexes, sans modifier le code HTML.

Note:

Pour obtenir cette fonctionnalité dans l’éditeur de texte enrichi, nous devons l’étendre. Par défaut, le texte enrichi dans SXA pointe vers le texte enrichi par défaut. Pour étendre le texte enrichi, veuillez vous référer à https://blogs.perficient.com/2020/06/09/using-html-snippet-with-rich-text-editor/

La liste déroulante « Appliquer la feuille de style CSS » dans Sitecore RTE est une option assez conviviale pour les auteurs de contenu lorsqu’il s’agit d’appliquer des styles/thèmes complexes, sans modifier le code HTML.

Comment configurer CSS dans un éditeur de texte enrichi

Apprenons comment ajouter des classes personnalisées dans le texte enrichi pour améliorer l’expérience de l’auteur du contenu.

Vérifier les configurations

Vérifiez si les paramètres « WebStylesheet » sont correctement configurés dans votre web.config ou Sitecore.config déposer

<!--  WEB SITE STYLESHEET
        CSS file for HTML content of Sitecore database.
        The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
        By using it, you can make the content of HTML fields look the same as the actual Web Site
  -->
<setting name="WebStylesheet" value="/default.css" />

Par défaut, il pointe vers « default.css » situé dans le chemin de votre répertoire racine ({Webroot} \ {Nom de l’instance Sitecore}\Site Web dossier)

Ou vous pouvez parcourir le showconfig.aspx page pour rechercher les paramètres et les valeurs « WebStylesheet » (http://{URL CMS}/sitecore/admin/showconfig.aspx)

Accédez à votre shell\Contrôles\Éditeur de texte enrichi dossier sur votre serveur CM :
« {WebRoot} \ {Nom de l’instance Sitecore}\Website\sitecore\shell\Controls\Rich Text

Note:

1. Pour les sites conteneurisés, vérifiez les fichiers sous CM Container
2. Il est fortement recommandé de contrôler la source de ce fichier pour remplacer le même fichier dans des environnements supérieurs.

Ajouter une nouvelle balise au fichier RTE ToolsFile.xml

Editez le fichier « ToolsFile.xml » pour avoir des classes supplémentaires

Ajoutez une nouvelle règle de style dans votre fichier CSS « ​​WebStylesheet »

.red-background {
    background-color: red;
    display: block;
}

.green-background {
    background-color: green;
    display: block;
}

Accédez au fichier « default.css » ou au fichier correspondant que vous avez défini au point n°1 ci-dessus et à la règle CSS correspondante avec exactement le même nom de règle que la « valeur » définie pour le nœud correspondant dans le fichier ToolsEdit.xml

Résultat

NOTE IMPORTANTE: Le par défaut.css pourrait être mis en cache dans votre navigateur. Vous devez actualiser le navigateur client avec l’une des options suivantes pour appliquer les mises à jour apportées à ce fichier CSS :

1. Pointez vers un fichier CSS personnalisé dans le dossier CSS de votre site local
2. Effacement explicite du cache du navigateur
3. Utiliser une URL versionnée comme (Ceci n’est généralement pas recommandé car les modifications ne sont généralement pas apportées directement à Web.config) :

J’espère que vous avez trouvé cela utile ! Vérifier notre blog Sitecore pour des trucs et astuces plus utiles.