DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Configuration de l’éditeur de texte enrichi pour l’éditeur universel configure-rte

Last update: Wed Jan 07 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • S'applique à :
  • Experience Manager as a Cloud Service

Créé pour :

  • Administration
  • Développeur

Découvrez comment configurer l’éditeur de texte enrichi dans l’éditeur universel.

Vue d’ensemble overview

L’éditeur universel fournit un éditeur de texte enrichi (RTE) à la fois sur place et dans le panneau des propriétés pour permettre aux créateurs et aux créatrices d’appliquer des modifications de mise en forme lorsqu’ils modifient leur texte.

Cet éditeur de texte enrichi peut être configuré à l’aide de filtres de composant . Ce document décrit les options de configuration disponibles, ainsi que des exemples.

NOTE
Lorsque vous démarrez un projet d’éditeur universel, toutes les fonctionnalités de texte enrichi prises en charge par votre serveur principal (AEM avec une implémentation Edge Delivery ou découplée) sont automatiquement actives.
  • Vous pouvez désactiver les options dont vous n’avez pas besoin.
  • L’activation d’options non compatibles avec votre type de projet n’est pas prise en charge.

Structure de configuration structure

La configuration de l’éditeur de texte enrichi se compose de deux parties :

  • toolbar : la configuration de la barre d’outils contrôle les options de modification disponibles dans l’interface utilisateur et leur organisation.
  • actions : la configuration des actions vous permet de personnaliser le comportement et l’aspect des actions de modification individuelles.

Ces configurations peuvent être définies dans le cadre d’un filtre de composant avec la propriété rte.

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

Configuration de la barre d’outils toolbar

La configuration de la barre d’outils contrôle les options de modification disponibles dans l’interface utilisateur et leur organisation. Sections disponibles

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike"],
    // Text alignment options
    "alignment": ["left", "center", "right", "justify"],
    // Text direction options, right-to-left or left-to-right
    "direction": ["rtl", "ltr"],
    // Indentation controls
    "indentation": ["indent", "outdent"],
    // Block-level elements
    "blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Configuration des actions actions

La configuration des actions vous permet de personnaliser le comportement et l’apparence des actions de modification individuelles. Voici les sections disponibles.

Formater les actions format

Les actions de format sont utilisées pour appliquer une mise en forme et prendre en charge le changement de balise HTML pour choisir entre des variantes sémantiques. Les sections suivantes sont disponibles.

{
  "actions": {
    "bold": {
      "tag": "strong",      // Use <strong> instead of <b>
      "shortcut": "Mod-B",  // Custom keyboard shortcut
      "label": "Make Bold"  // Custom button label
    },
    "italic": {
      "tag": "em",          // Use <em> instead of <i>
      "shortcut": "Mod-I",
      "label": "Italicize"
    },
    "strike": {
      "tag": "del"          // Use <del> instead of <s>
    }
  }
}

Liste des actions list

Les actions de liste prennent en charge le wrapping de contenu pour contrôler la structure HTML. Les sections suivantes sont disponibles.

{
  "actions": {
    "bullet_list": {
      "wrapInParagraphs": true,    // <ul><li><p>content</p></li></ul>
      "shortcut": "Mod-Shift-8",   // Custom shortcut
      "label": "Bullet List"       // Custom label
    },
    "ordered_list": {
      "wrapInParagraphs": false,   // <ol><li>content</li></ol> (default)
      "shortcut": "Mod-Shift-9"
    }
  }
}

Les actions Lien prennent en charge le contrôle des attributs de la cible pour gérer le comportement des liens. Les sections suivantes sont disponibles.

{
  "actions": {
    "link": {
      "hideTarget": false,       // Show target attribute options (default)
      "shortcut": "Mod-K",       // Custom keyboard shortcut
      "label": "Insert Link"     // Custom button label
    },
    "unlink": {
      "shortcut": "Mod-Shift-K", // Custom keyboard shortcut
      "label": "Remove Link"     // Custom button label
    }
  }
}
  • hideTarget : false (par défaut) - Incluez l’attribut cible dans les liens, en autorisant les _self, les _blank, etc.
  • hideTarget : true - Exclure entièrement l’attribut cible des liens

L'action unlink n'apparaît que lorsque le curseur est positionné dans un lien existant. Cela supprime la mise en forme du lien tout en conservant le contenu textuel.

Actions sur l’image image

Les actions d’image prennent en charge le renvoi à la ligne des éléments d’image pour générer un balisage d’image réactif. Les sections suivantes sont disponibles.

{
  "actions": {
    "image": {
      "wrapInPicture": false,     // Use <img> tag (default)
      "shortcut": "Mod-Shift-I",  // Custom keyboard shortcut
      "label": "Insert Image"     // Custom button label
    }
  }
}

Options de configuration d’image image-options

  • wrapInPicture : false (par défaut) - Génération d’éléments de <img> simples
  • wrapInPicture : true - Envelopper des images dans des éléments <picture> pour un design réactif

Configuration de la mise en retrait indentation

La mise en retrait possède une configuration au niveau des fonctionnalités qui contrôle la portée du comportement de mise en retrait, ainsi que des configurations d’action individuelles pour les raccourcis et les libellés.

{
  "actions": {
    // Feature-level configuration
    "indentation": {
      "scope": "all"  // Controls what content can be indented (default: "all")
    },

    // Individual action configurations
    "indent": {
      "shortcut": "Tab",           // Custom keyboard shortcut
      "label": "Increase Indent"   // Custom button label
    },
    "outdent": {
      "shortcut": "Shift-Tab",     // Custom keyboard shortcut
      "label": "Decrease Indent"   // Custom button label
    }
  }
}

Options d’étendue de la mise en retrait indentation-options

  • scope : all (par défaut) - Le retrait/retrait négatif s’applique à tout le contenu :

    • Listes : imbriquer/désimbriquer des éléments de liste
    • Paragraphes et titres : Augmenter/diminuer le niveau général de retrait

  • scope : lists - Le retrait/retrait négatif s’applique uniquement aux éléments de liste :

    • Listes : imbriquer/désimbriquer des éléments de liste
    • Paragraphes et en-têtes : pas de retrait (boutons désactivés pour ces paragraphes)
NOTE
L’imbrication de listes à l’aide des touches Tab/Maj+Tab fonctionne indépendamment des paramètres de mise en retrait généraux.

Autres actions other

Toutes les autres actions prennent en charge la personnalisation de base. Les sections suivantes sont disponibles.

{
  "actions": {
    "h1": {
      "shortcut": "Mod-Alt-1",
      "label": "Large Heading"
    },
    "paragraph": {
      "shortcut": "Mod-Alt-0",
      "label": "Normal Text"
    },
    "link": {
      "shortcut": "Mod-K",
      "label": "Insert Link",
      "hideTarget": false    // Show target attribute options (default: false)
    }
  }
}

Exemple complet example

Voici un exemple de configuration complète.

[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Other actions with basic customization
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]

Détails de l’option d’action action-details

Plusieurs options comportent des détails supplémentaires qu’il est important de garder à l’esprit.

wrapInParagraphs wrapInParagraphs

L’option wrapInParagraphs des listes contrôle la structure d’HTML.

wrapInParagraphs: false (par défaut) wrapInParagraphs-false

<ul>
  <li>Simple text content</li>
  <li>Another item</li>
</ul>

wrapInParagraphs: true wrapInParagraphs-true

<ul>
  <li><p>Text wrapped in paragraphs</p></li>
  <li><p>Supports rich formatting within items</p></li>
</ul>

Utilisez wrapInParagraphs: true lorsque vous avez besoin de :

  • Formatage enrichi dans les éléments de liste
  • Plusieurs paragraphes par élément de liste
  • Style cohérent au niveau du bloc

wrapInPicture

L’option wrapInPicture pour les images contrôle la structure HTML générée pour le contenu de l’image.

wrapInPicture : false (par défaut) wrapinpicture-false

<img src="image.jpg" alt="Description" />

wrapInPicture : true wrapinpicture-true

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

Utilisez wrapInPicture: true lorsque vous avez besoin de :

  • Prise en charge des images réactives avec des éléments <source>.
  • Fonctionnalités de direction artistique.
  • La pérennisation des fonctionnalités d’image avancées.
  • Structure cohérente d’un élément image.
NOTE
Lorsque wrapInPicture: true est activé, les images peuvent être améliorées avec des éléments <source> supplémentaires pour différents formats et requêtes de média, ce qui les rend plus flexibles pour le responsive design.

L’option hideTarget pour les liens contrôle si l’attribut target est inclus dans les liens générés et si la boîte de dialogue de création de lien inclut un champ pour la sélection de la cible.

hideTarget: false (par défaut) hideTarget-false

<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>

hideTarget: true hideTarget-true

<a href="https://example.com">Link text</a>

Désactivation des liens sur les images disableforimages

L’option disableForImages pour les liens contrôle si les utilisateurs peuvent créer des liens sur des images et des éléments d’image. Cela s’applique à la fois aux éléments de <img> intégrés et aux éléments de <picture> au niveau du bloc.

disableForImages: false (par défaut) disableforimages-false

Les utilisateurs peuvent sélectionner des images et les encapsuler dans des liens.

<!-- Inline image with link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Description" />
</a>

<!-- Block-level picture with link -->
<a href="https://example.com">
  <picture>
    <img src="image.jpg" alt="Description" />
  </picture>
</a>

disableForImages : true disableforimages-true

Le bouton Lien est désactivé lorsqu’une image ou une image est sélectionnée. Les utilisateurs peuvent uniquement créer des liens sur du contenu texte.

<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>

Utilisez disableForImages: true lorsque vous souhaitez :

  • Maintenez la cohérence visuelle en empêchant les images liées.
  • Simplifiez la structure de contenu en séparant les images de la navigation.
  • Appliquez des politiques de contenu qui limitent la liaison d’images.
  • Réduisez la complexité de l’accessibilité dans votre contenu.
NOTE
Ce paramètre affecte uniquement la possibilité de créer des liens sur les images. Elle ne supprime pas les liens existants des images dans le contenu.

Options de balises tag

Les actions de format permettent de basculer entre les variantes d’HTML.

Action
Balise par défaut
Balises alternatives
Cas d’utilisation
bold
<strong>
<b>
Emphase sémantique et visuelle
italic
<em>
<i>
Style sémantique ou visuel
strike
<del>
<s>
Suppression visuelle ou sémantique

Choisissez des balises sémantiques (<strong>, <em>, <del>) pour une meilleure accessibilité et un meilleur référencement.

Raccourcis clavier keyboard-shortcuts

Les raccourcis utilisent le ou les Mod-Key de format où :

  • Mod = Cmd sous Mac, Ctrl sous Windows/Linux
  • Exemples : Mod-B, Mod-Shift-8, Mod-Alt-1
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab