--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/editeur-de-texte' title: 'Ajouter les styles de marque et les boutons à l’éditeur de texte | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T10:59:49+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Quand les contributeurs cliquent dans un texte de DXPR Builder, une barre d’outils apparaît. Vous pouvez remplir sa liste Styles avec les styles de votre marque, comme un paragraphe d’intro ou une phrase surlignée. Vous pouvez aussi choisir les boutons vus par chaque rôle. Les contributeurs appliquent alors un aspect de marque en un clic au lieu de régler tailles et couleurs à la main. Les polices viennent de votre thème ; voir Polices personnalisées.' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ajouter les styles de marque et les boutons à l’éditeur de texte' description: 'Quand les contributeurs cliquent dans un texte de DXPR Builder, une barre d’outils apparaît. Vous pouvez remplir sa liste Styles avec les styles de votre marque, comme un paragraphe d’intro ou une phrase surlignée. Vous pouvez aussi choisir les boutons vus par chaque rôle. Les contributeurs appliquent alors un aspect de marque en un clic au lieu de régler tailles et couleurs à la main. Les polices viennent de votre thème ; voir Polices personnalisées.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T10:59:49+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/editeur-de-texte' articleSection: 'Aux couleurs de votre marque' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/editeur-de-texte' description: 'Quand les contributeurs cliquent dans un texte de DXPR Builder, une barre d’outils apparaît. Vous pouvez remplir sa liste Styles avec les styles de votre marque, comme un paragraphe d’intro ou une phrase surlignée. Vous pouvez aussi choisir les boutons vus par chaque rôle. Les contributeurs appliquent alors un aspect de marque en un clic au lieu de régler tailles et couleurs à la main. Les polices viennent de votre thème ; voir Polices personnalisées.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Gérer le site](/fr/hc/documentation/learn-dxpr-builder/manage) /[Aux couleurs de votre marque](/fr/hc/documentation/learn-dxpr-builder/customization) # Ajouter les styles de marque et les boutons à l’éditeur de texte. Apprendre DXPR BuilderGérer le siteAux couleurs de votre marque ## Dans ce guide Guides associés - [Styliser le contenu du builder avec le CSS de votre thème](/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/css-personnalise) - [Classes utilitaires](/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/classes-utilitaires) - [Choisir ce que chaque rôle voit dans le builder](/fr/hc/documentation/apprendre-dxpr-builder/administration/profils-d-utilisateurs-admin) Quand les contributeurs cliquent dans un texte de DXPR Builder, une barre d’outils apparaît. Vous pouvez remplir sa liste **Styles** avec les styles de votre marque, comme un paragraphe d’intro ou une phrase surlignée. Vous pouvez aussi choisir les boutons vus par chaque rôle. Les contributeurs appliquent alors un aspect de marque en un clic au lieu de régler tailles et couleurs à la main. Les polices viennent de votre thème ; voir [Polices personnalisées](/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/polices-personnalisees). ## Avant de commencer - Pour modifier les styles, il faut **Administer DXPR Builder configuration**. - Pour modifier les boutons de barre d’outils, il faut **Administer dxpr builder profile**. - Chaque style a besoin de CSS derrière lui. Les classes Bootstrap 5 comme `lead` marchent quand la page charge Bootstrap 5. Vos propres classes exigent une règle dans le thème ; voir [CSS personnalisé](/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/css-personnalise). ## Configuration 1. Accédez à **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`). 2. Déployez **Text Editor**. La zone **Custom styles** liste déjà les styles livrés avec DXPR Builder, un par ligne. 3. Ajoutez une ligne par style sous la forme `Label=element.class`, et supprimez les lignes non voulues. 4. Cliquez sur **Save settings**. 5. Ouvrez une page dans le builder, ou rechargez-la si elle est ouverte, et cliquez dans un texte. 6. Cliquez sur **Styles** sur la barre d’outils et choisissez votre style. Ces lignes ajoutent quatre styles : ```text Lead=p.lead Event date=span.text-primary.fw-semibold Callout=p.border-start.border-primary.border-4.ps-3 Sassy Title=h1.sassy-title ``` Chaque ligne a trois parties : - Le **label** avant `=` est le nom vu par les contributeurs dans la liste. - L’**element** après `=` décide ce que le style couvre. Un élément de bloc comme `p`, `h2` ou `blockquote` stylise tout un paragraphe ou titre. Un élément en ligne comme `span`, `mark` ou `code` n’enveloppe que les mots sélectionnés. - Chaque **class** suit un point. Ajoutez plus de classes avec plus de points, comme dans `Callout` ci-dessus. Les noms d’élément n’utilisent que lettres et chiffres. Les noms de classe utilisent lettres, chiffres, traits d’union et soulignés. Pour retrouver la liste livrée, videz la zone et enregistrez. ## Boutons de barre d’outils par rôle 1. Accédez à **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) et cliquez sur **Edit** à côté du profil du rôle. 2. Déployez **Text editor buttons (inline editing)**. Cochez les boutons pour le texte modifié sur la page. 3. Déployez **Text editor buttons (modal editing)**. Cochez les boutons pour les zones de texte dans un dialogue de réglages. 4. Cliquez sur **Save**. La modification en ligne couvre les éléments Text, Alert et Blockquote. Gardez **Font style** coché dans les deux groupes pour montrer vos styles personnalisés ; c’est le nom du profil pour la liste **Styles**. Si vous décochez chaque bouton d’un groupe, cette barre d’outils revient au jeu intégré. [Profils d’utilisateur](/fr/hc/documentation/apprendre-dxpr-builder/administration/profils-d-utilisateurs-admin) explique quel profil s’applique à qui. ## Ce que vous voyez **Styles** sur la barre d’outils ouvre un panneau avec deux groupes. **Block styles** contient les styles pour paragraphes et titres entiers, **Text styles** ceux pour les mots sélectionnés. Après avoir choisi un style, le bouton montre son nom, ou **Multiple styles** quand plusieurs s’appliquent. L’éditeur enregistre l’élément et ses classes dans le HTML de la page, donc les visiteurs voient le même aspect. Un style de bloc n’est actif que dans son propre élément : `Sassy Title` exige le curseur dans un **Heading 1**. ## Paramètres Les 36 boutons figurent dans les deux groupes. Un nouveau profil démarre avec ceux-ci cochés : | Bouton | Nom machine | Défaut en ligne | Défaut modal | |---|---|:-:|:-:| | **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | oui | oui | | **Bold**, **Italic** | `bold`, `italic` | oui | oui | | **Underline**, **Strike through** | `underline`, `strikethrough` | | oui | | **Superscript**, **Subscript** | `superscript`, `subscript` | | oui | | **Remove format** | `removeFormat` | oui | oui | | **Text color** | `fontColor` | oui | oui | | **Background color** | `fontBackgroundColor` | | | | **Font size** | `fontSize` | oui | oui | | **Font family** | `fontFamily` | | | | **HTML block format** | `heading` | oui | oui | | **Font style** (la liste **Styles**) | `style` | oui | oui | | **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | oui | oui | | **Insert/Remove Bullet list** | `bulletedList` | oui | oui | | **Insert/Remove Numbered list** | `numberedList` | | oui | | **Outdent**, **Indent** | `outdent`, `indent` | | oui | | **Block quote** | `blockQuote` | | oui | | **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | oui | oui | | **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` | | oui | | **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` | | oui | | **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` | | | | **Undo**, **Redo** | `undo`, `redo` | oui | oui | Les utilisateurs sans profil activé correspondant à leurs rôles reçoivent les barres d’outils intégrées. En ligne, ce sont **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, les deux listes, **Link**, **Image**, **Table**, **Undo** et **Redo**. La barre modale ajoute les boutons de soulignement, barré, exposant et indice, alignement, retrait, couleur et taille. Elle ajoute aussi **Block quote**, **Horizontal rule**, **Character map**, **Source code** et **Show blocks**. Quand l’IA est active, les deux reçoivent les deux boutons IA. **Font family** propose les polices web standard de CKEditor, pas celles de votre thème. ## Si vous ne voyez pas votre style - **La liste Styles ne montre que les styles livrés.** Une ligne casse le format, ou une ligne vide se trouve entre deux styles, donc DXPR Builder ignore toute la liste. Corrigez-la sous **Text Editor** sous `/admin/dxpr_studio/dxpr_builder/settings` et enregistrez. - **Votre style est grisé.** Un style de bloc ne marche que dans son propre élément : `h1.sassy-title` exige un **Heading 1**. Changez d’abord le bloc avec la liste des titres, ou définissez le style pour `p`. - **Il n’y a pas de bouton Styles sur la barre d’outils.** Le profil de l’éditeur a **Font style** décoché. Cochez-le dans les deux groupes de boutons sous `/admin/dxpr_studio/dxpr_builder/profile`. - **Le style s’applique, mais le texte semble pareil.** Le thème n’a pas de CSS pour la classe, ou Bootstrap 5 n’est pas chargé. Ajoutez la règle au thème, ou réglez **Sideload Bootstrap files** sur **Bootstrap 5** sous **Bootstrap** sur la page General Settings. - **Les contributeurs voient le style, pas les visiteurs.** **Apply text format filters to frontend content** est activé sous **Text Filters**, et le format de texte du champ retire les attributs `class`. Désactivez l’option, ou donnez au champ un format qui garde les classes ; voir [Les visiteurs voient autre chose](/fr/hc/documentation/apprendre-dxpr-builder/depannage/visiteurs-voient-autre-chose). ## Et ensuite ? - [CSS personnalisé](/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/css-personnalise) : écrire les règles de thème derrière vos classes de style. - [Classes utilitaires](/fr/hc/documentation/apprendre-dxpr-builder/personnalisation/classes-utilitaires) : proposer des classes pour des éléments entiers dans la liste **HTML classes**. - [Profils d’utilisateur](/fr/hc/documentation/apprendre-dxpr-builder/administration/profils-d-utilisateurs-admin) : tout le reste contrôlé par un profil.