Configurer l'éditeur de texte enrichi

Last updated:

En tant que développeur, il arrive que les éditeurs WYSIWYG fournissent des fonctionnalités qui, lorsqu'elles sont mal utilisées, peuvent entraver l'objectif d'une marque unifiée et causer des problèmes de conception et de flux de contenu. L'éditeur de texte enrichi à l'intérieur des modules personnalisés permet désormais aux développeurs de supprimer des composants de la barre d'outils de configuration via la propriété enabled_features à l'intérieur du fichier fields.json.

Remarque : Ce qui suit s'applique aux modules personnalisés utilisant le champ de texte enrichi en développement local uniquement. L'utilisation de cette fonctionnalité ne désactivera pas la fonctionnalité des options supprimées de l'éditeur de texte enrichi, uniquement l'affichage des options. Cela s'explique par des raisons de rétrocompatibilité, de sorte que le contenu existant n'est pas affecté. 

Comment utiliser enabled_features

Dans votre fichier fields.json où vous avez votre objet de champ de texte enrichi, vous pouvez activer certaines fonctionnalités en ajoutant les options valides de la barre d'outils dans un tableau à la propriété enabled_features, comme indiqué ci-dessous :

JSON
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
  "name" : "description",
  "label" : "Description",
  "required" : false,
  "locked" : false,
  "type" : "richtext",
  "default" : null,
  "enabled_features" : ["bold","link","image"]
}

L'éditeur de contenu verra alors l'éditeur de texte enrichi avec uniquement les options incluses activées, comme illustré dans l'image ci-dessous :

Remarque : Certaines fonctionnalités, telles que le bouton Effacer les styles qui vous permet de revenir au style par défaut de l'éditeur, seront toujours activées et ne peuvent pas être supprimées. Si la propriété enabled_features est omise, toutes les fonctionnalités apparaîtront.

Un exemple de barre d'outils RTE avec les fonctionnalités activées.

Liste de fonctionnalités

Voici une liste des fonctionnalités qui peuvent être activées individuellement lors de l'utilisation de la propriété enabled_features.

Groupes de contrôles

Use this table to describe parameters / fields
OptionDescription
colors

Contrôles de la couleur du texte et de l'arrière-plan.

fonts

Contrôles de la famille de polices et de la taille de police.

indents

Contrôles du retrait négatif et du retrait.

lists

Contrôles de listes à puces et numérotées.

standard_emphasis

Contrôles du texte gras, italique et souligné.

advanced_emphasis

Contrôles de texte barré, d'exposant, d'indice et de format de code.

glyphs

Contrôles d'émojis, de caractères spéciaux et d'icônes. Non pris en charge dans les modules d'e-mail. Pour ajouter le sélecteur d'emoji aux modules d'e-mail, utilisez plutôt emoji.

Formatage de texte

Use this table to describe parameters / fields
OptionDescription
block

Affiche le menu déroulant du sélecteur de style.

font_family

Affiche le menu déroulant du sélecteur de police.

font_size

Affiche le menu déroulant de la taille de la police.

bold

Affiche le bouton de texte en gras.

italic

Affiche le bouton de texte en italique.

underline

Affiche le bouton de texte souligné.

text_color

Affiche le bouton de couleur du texte.

background_color

Affiche le bouton de couleur d'arrière-plan.

alignment

Affiche le bouton d'alignement.

bulleted_list

Affiche le bouton de liste à puces.

numbered_list

Affiche le bouton de liste numérotée.

lineheight

Affiche le bouton de hauteur de ligne.

outdent

Affiche le bouton de retrait négatif.

indent

Affiche le bouton de retrait.

strikethrough

Affiche le bouton de texte barré.

superscript

Affiche le bouton d'exposant.

subscript

Affiche le bouton d'indice.

code_format

Affiche le bouton de format de code.

Insérer des boutons

Use this table to describe parameters / fields
OptionDescription
link

Affiche le bouton de lien.

image

Affiche le bouton d'image. Non pris en charge dans les modules d'e-mail.

emoji

Affiche le bouton d'émoji.

personalize

Affiche l'élément de barre d'outils de personnalisation.

cta

Affiche l'élément de menu de call-to-action sous le menu d'insertion.

embed

Affiche l'élément de menu d'intégration sous le menu d'insertion.

video

Affiche l'élément de menu vidéo sous le menu d'insertion.

table

Affiche l'élément de menu de tableau sous le menu d'insertion.

charmap

Affiche l'élément de menu de caractères spéciaux sous le menu d'insertion.

anchor

Affiche l'élément de menu d'ancrage sous le menu d'insertion.

hr

Affiche l'élément de menu de ligne horizontale sous le menu d'insertion.

nonbreaking_space

Affiche l'élément de menu d'espace insécable sous le menu d'insertion.

icon

Affiche l'élément de menu d'icône sous le menu d'insertion.

Options avancées

Use this table to describe parameters / fields
OptionDescription
source_code

Affiche l'élément de menu de code source sous le menu avancé.

visual_blocks

Affiche l'élément de menu d'affichage des blocs sous le menu avancé.


Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.