Ajouter les styles de marque et les boutons à l’éditeur de texte.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

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.

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é.

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 :

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 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.

La barre d’outils de texte d’un élément Text dont le bouton Styles dit Lead, au-dessus du paragraphe avec le curseur dedans, désormais dans le plus grand style Lead au-dessus d’un paragraphe normal

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.

Et ensuite ?