DocumentationAEMGuide de l’utilisateur

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

Dernière mise à jour : 6 août 2026
  • S'applique à :
  • Experience Manager as a Cloud Service

Créé pour :

  • Admin
  • Developer

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 (mise en œuvre d’AEM avec Edge Delivery ou découplée) sont automatiquement actives et disponibles dans la fenêtre de l’éditeur modal de l’éditeur de texte enrichi.
  • 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_color"],
    // 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", "blockquote"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image", "special_characters"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen"],
    // Advanced items (e.g. the class picker).
    "advanced": ["classes"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Configuration d’action action

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

Options d’action courantes common-action-options

La plupart des actions prennent en charge les options courantes suivantes :

  • shortcut? : chaîne - remplace le raccourci clavier par défaut de l’action (le cas échéant)
  • label? : chaîne - remplace le libellé utilisé pour l’action dans l’interface utilisateur
  • hideInline? : booléen. Lorsqu’elle est true, cette action est masquée dans la barre d’outils de l’éditeur de texte enrichi contextuel (intégré)
{
  "actions": {
    "bold": {
      "label": "Bold",
      "shortcut": "Mod-B",
      "hideInline": true
    }
  }
}

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"
    }
  }
}

Actions du tableau table-actions

Les actions de tableau prennent en charge le renvoi à la ligne du contenu pour contrôler la structure HTML dans les cellules du tableau :

{
  "actions": {
    "table": {
      "wrapInParagraphs": false, // <td>content</td> (default)
      "shortcut": "Mod-Alt-T",   // Custom shortcut
      "label": "Insert Table"    // Custom label
    }
  }
}

Options de configuration du tableau table-configuration-options

  • wrapInParagraphs : false (par défaut) - Les cellules du tableau contiennent du contenu de texte non enveloppé
  • wrapInParagraphs : true - Les cellules de tableau encapsulent le contenu dans des balises de paragraphe

Exemples :

Si wrapInParagraphs : false :

<!-- Single line -->
<td>Cell content</td>

<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>

Si wrapInParagraphs : true :

<!-- Single paragraph -->
<td><p>Cell content</p></td>

<!-- Multiple paragraphs preserved -->
<td>
  <p>Line 1</p>
  <p>Line 2</p>
</td>
NOTE
Lorsque vous extrayez des paragraphes (wrapInParagraphs : false), le désinfectant insère automatiquement des balises <br> entre plusieurs paragraphes afin de conserver les sauts de ligne visuels. Cela respecte les normes HTML et les pratiques courantes des principaux éditeurs de texte enrichi.

Boîtes de dialogue Propriétés properties-dialog

Le module externe de tableau fournit trois boîtes de dialogue d’éditeur de propriétés qui s’ouvrent à partir du menu Table lorsque ces indicateurs sont activés :

  • Propriétés du tableau — Modifiez la largeur/hauteur du tableau englobant, l’espacement des cellules, la marge intérieure des cellules, l’alignement, la bordure (largeur/style/couleur) et la couleur d’arrière-plan. Les modifications de la bordure et de la marge intérieure des cellules s’étendent sur chaque cellule d’une même transaction, de sorte que le résultat visuel correspond à ce à quoi un utilisateur s’attend.
  • Propriétés de la ligne — Modifiez le type de ligne de la ligne englobante (en-tête/corps/pied de page), l’alignement, la hauteur, la bordure (largeur/style/couleur) et la couleur d’arrière-plan. Le type de ligne est en section seule (correspondant au table_header_type: "section" par défaut de TinyMCE) : une ligne d’en-tête passe en <thead> lors de la sérialisation, mais ses cellules restent <td>. Utilisez Propriétés de la cellule -> Cellule d’en-tête par <th>. Lors de la sérialisation, les lignes sont regroupées en sections <thead>/<tbody>/<tfoot> réelles (correspondant à TinyMCE/Word). Voir la note relative à la conservation ci-dessous. Les bordures s’étendent jusqu’aux cellules de la ligne pour s’afficher avec une bordure réduite.
  • Propriétés de la cellule — Modifiez le type de cellule sélectionné (cellule/en-tête), la largeur/hauteur, l’alignement horizontal et vertical, la bordure (largeur/style/couleur) et la couleur d’arrière-plan. Lorsqu’un CellSelection s’étend sur plusieurs cellules, le correctif est appliqué simultanément à chaque cellule sélectionnée. Le type de cellule permet d’activer ou de désactiver la cellule entre table_cell (<td>) et table_header (<th>).

Tous trois sont désactivés par défaut (opt-in), correspondant au reste de la surface de configuration de l’éditeur de texte enrichi où les fonctionnalités sont désactivées jusqu’à ce qu’un client les active explicitement. Souscrivez par client lorsque vous souhaitez que les boîtes de dialogue s’affichent :

{
  actions: {
    table: {
      showTableProperties: true, // default false: show "Table Properties" menu item
      showRowProperties: true,   // default false: show "Row Properties" menu item
      showCellProperties: true,  // default false: show "Cell Properties" menu item
    }
  }
}

Options de la boîte de dialogue Propriétés properties-dialog-options

|—|—|—|
| Option | Par défaut | Effet |
| showTableProperties | false | Afficher l’élément Propriétés du tableau dans le menu déroulant Tableau |
| showRowProperties | false | Afficher l’élément Propriétés de la ligne dans le sous-menu Ligne |
| showCellProperties | false | Afficher l’élément Propriétés de la cellule dans le sous-menu Cellule |

Les boîtes de dialogue effectuent des allers-retours htmlAttrs.style sur le nœud ProseMirror correspondant, c’est-à-dire qu’elles émettent des fichiers CSS intégrés tels que TinyMCE/Word, et non des attributs de données personnalisés. La largeur de cellule écrit également le colwidth au niveau du schéma afin qu’il survive aux machines de tableau de PM. Le type de cellule est porté par la balise node (<td>/<th>).

Le schéma prosemirror-tables est plat (table -> table_row -> cell) sans nœuds de section <thead>/<tbody>/<tfoot>. Par conséquent, en interne, l’intention d’en-tête/corps/pied de page d’une ligne est conservée sur le <tr> en tant que marqueur de data-row-type. Lorsque le type d’une ligne change, les lignes sont à nouveau triées à leur place dans l’ordre en-tête -> corps -> pied de page au sein de la même transaction, de sorte que la zone de travail de l’éditeur correspond à la structure exportée en direct (les lignes d’en-tête sont hissées en haut, les lignes de pied de page sont enfoncées en bas, comme TinyMCE). Cette réorganisation dans l’éditeur est ignorée lorsqu’une cellule s’étend sur plusieurs lignes (rowspan > 1), où le déplacement d’une ligne corromprait la grille. En sortant, sanitizeHTML regroupe les lignes en sections <thead>/<tbody>/<tfoot> réelles (lignes d’en-tête en premier, lignes de pied de page en dernier) et laisse tomber le marqueur, produisant la même structure TinyMCE/Word d’émission. En arrivant, la section englobante d’un <tr> est relue dans le marqueur, de sorte qu’elle coupe les allers-retours HTML.

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

Plein écran full-screen

L’action Plein écran active/désactive le mode Plein écran de l’éditeur :

{
  actions: {
    fullscreen: {
      label: "Fullscreen"; // Custom button label
    }
  }
}

Lorsque le plein écran est actif, le wrapper de l’éditeur reçoit le rte-fullscreen-wrapper de classe. Les applications clientes peuvent cibler cette classe pour appliquer des styles ou des propriétés CSS personnalisés (par exemple, z-index, dimensions, recouvrement). (Non pris en charge dans l’éditeur universel)

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.

Caractères spéciaux special-characters

L’action d’insertion special_characters ouvre une fenêtre contextuelle de sélecteur de caractères permettant d’insérer des caractères spéciaux (symboles, opérateurs mathématiques, signes de devise, ponctuation, flèches, etc.) à la position du curseur.

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

Un jeu par défaut de 44 caractères couramment utilisés est inclus par défaut. La liste des caractères peut être personnalisée par le biais de deux options de configuration :

  • appendCharacters - Ajouter des caractères au jeu par défaut
  • characters - Remplacez entièrement le jeu par défaut

Chaque entrée de caractère comporte character (caractère Unicode) et title (info-bulle/nom accessible).

Ajouter des caractères aux valeurs par défaut append-special-characters

{
  "actions": {
    "special_characters": {
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" },
        { "character": "\u2764", "title": "Heavy black heart" },
      ];
    }
  }
}

Remplacer les caractères spéciaux par défaut replace-special-characters

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" },
        { "character": "\u2122", "title": "Trade mark sign" },
      ];
    }
  }
}

Les deux options ensemble both-special-character-options

Cet exemple utilise characters comme base, puis ajoute des caractères supplémentaires à l’aide de appendCharacters.

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" }
      ],
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" }
      ]
    }
  }
}

Classes CSS css-classes

L’action classes ajoute une liste déroulante qui applique une classe CSS configurable au contenu de l’éditeur de texte enrichi. Il est répertorié en tant qu’élément dans la section advanced. Le plug-in écrit/supprime uniquement les noms de classe sur l’HTML produit. L’application cliente possède le CSS réel de chaque classe et est chargée de le charger quel que soit l’endroit où le contenu de l’éditeur de texte enrichi est rendu (éditeur, prévisualisation, publication).

La liste déroulante ne s’affiche que lorsqu’au moins une option est configurée. Le plug-in n’est fourni avec aucune valeur par défaut.

{
  toolbar: {
    advanced: ["classes"],
    sections: ["blocks", "format", "advanced"],
  },
  actions: {
    classes: {
      label: "Add Custom Class",
      options: [
        { value: "rte-hero", label: "Hero title" },
        { value: "rte-lede", label: "Lede paragraph" },
        { value: "rte-callout", label: "Callout block" },
        { value: "rte-pill", label: "Pill (inline)" },
      ],
    },
  },
}

Chaque entrée a une valeur (le nom de classe CSS écrit dans HTML) et un libellé (le texte lisible par l’utilisateur affiché dans la liste déroulante).

La cible suit la règle qui se rapproche le plus de la réussite de la carrière :

  • Sélection vide à l’intérieur d’une étendue gérée : la classe est appliquée à cette exécution d’étendue, et non au bloc. Le fait de sélectionner une autre classe permute la classe de la plage ; Supprimer la classe personnalisée la supprime.
  • Sélection vide ailleurs (curseur uniquement) : la classe choisie est appliquée à l’ancêtre au niveau du bloc le plus proche du curseur (<p>, <h1>, etc.). Lorsque le curseur se trouve à l’intérieur d’un élément de liste ou d’une cellule de tableau qui enveloppe un paragraphe, le <li>/<td>/<th> reçoit la classe, et non le paragraphe interne.
  • Sélection réelle : le texte sélectionné est encapsulé dans un <span class="...">. Si la sélection possède déjà une étendue, la classe de l’étendue existante est mise à jour.
  • Supprimer la classe personnalisée : supprimez la classe gérée de la cible (exécution d’étendue ou bloc, selon la résolution du point d’insertion). Si le seul attribut restant sur une étendue était la classe managée, l’étendue elle-même est dépliée. L’option Supprimer la classe personnalisée ne s’affiche que lorsqu’une classe gérée est actuellement active.

Les classes existantes qui ne font pas partie de la liste des options configurées sont conservées intactes. Seules les classes gérées sont permutées en/hors. Les classes définies par le client coexistent en toute sécurité avec le plug-in .

Réflexion déroulante :

  • Lorsque seul le curseur est placé, la liste déroulante reflète la classe gérée la plus proche : l’étendue au niveau du signe insertion s’il en existe une, sinon le bloc sous le curseur.
  • Avec une sélection, la liste déroulante reflète la classe gérée sur l’étendue qui enveloppe la sélection. Uniquement lorsque l’ensemble de la sélection partage la même classe. Les sélections mixtes n’affichent rien sélectionné.

Types de blocs block-types

La section de la barre d’outils blocks affiche une liste déroulante qui permet de basculer le bloc actif entre les types de blocs configurés. Les valeurs prises en charge sont paragraph, h1-h6, code_block et blockquote.

  • blockquote est un bloc d’habillage (son content ProseMirror est block+), contrairement à paragraph/h1-h6/code_block qui sont des blocs de texte. Si vous sélectionnez Citation, le bloc actif est encapsulé dans un <blockquote>. La liste déroulante affiche alors Citation tel que sélectionné lorsque le signe insertion est à l’intérieur de l’un d’eux. Si vous sélectionnez un autre type de bloc (par exemple, Paragraphe) à l’intérieur d’un guillemet, le bloc sort d’abord du guillemet, de sorte qu’il le quitte également. Ceci reflète le menu déroulant des blocs de TinyMCE.
  • Puisqu’il s’agit d’un nœud d’habillage, un <blockquote> peut contenir plusieurs paragraphes, listes ou même des guillemets imbriqués. C’est ce qui permet d’envoyer et de reprendre sans perte du contenu créé de l’extérieur : TinyMCE (contenu hérité) et Word (coller) émettent tous deux du <blockquote><p>…</p></blockquote> (souvent plusieurs paragraphes) et cette structure est conservée lors du chargement, de la modification et de la sérialisation, plutôt que d’être aplatie.
  • Comme pour tous les types de bloc, l’application cliente possède le code CSS qui définit le style visuel <blockquote> l’endroit où le contenu de l’éditeur de texte enrichi est rendu.
{
  "toolbar": {
    "blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
    "sections": ["blocks"],
  },
  "actions": {
    "blockquote": {
      "label": "Quote", // Custom dropdown label
    },
  },
}

Coller en tant que texte paste-as-text

L’action de l’éditeur de paste_text active un workflow standard de collage en tant que texte brut.

  • Raccourci par défaut : Mod-Shift-v (Cmd+Maj+V sous macOS, Ctrl+Maj+V sous Windows/Linux)
  • Comportement : Colle à partir de texte/brut (la mise en forme source est ignorée)
    • Dans les listes, les nouvelles lignes créent des éléments de liste.
{
  "toolbar": {
    "editor": ["removeformat", "paste_text"]
  },
  "actions": {
    "paste_text": {
      "shortcut": "Mod-Shift-v",
      "label": "Paste as Text"
    }
  }
}

Rechercher et remplacer find-replace

L’action de l’éditeur de find_and_replace utilise prosemirror-search (surlignages de correspondance) ainsi qu’un plug-in de commande indexé par FIND_AND_REPLACE_PLUGIN_KEY.

  • Intégration : ajoutez des createFindAndReplacePlugin() aux modules externes ProseMirror de votre éditeur lorsque toolbar.editor inclut des find_and_replace.
  • API : utilisez FIND_AND_REPLACE_PLUGIN_KEY.getState(state) pour accéder à find, replaceNext, replaceAll et getMatchCount.
  • Styles : assurez-vous que votre application charge CSS pour les .ProseMirror-search-match et les .ProseMirror-active-search-match (à partir du style/search.css de prosemirror-search ou de votre propre équivalent).
{
  "toolbar": {
    "editor": ["find_and_replace"],
    "sections": ["editor"],
  },
  "actions": {
    "find_and_replace": {
      "label": "Find and replace",
    },
  },
}

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",
          "text_color"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "editor": [
          "removeformat",
          "paste_text"
        ],
        "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"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
        },
        // Other actions with basic customization
        "paste_text": {
          "shortcut": "Mod-Shift-v",
          "label": "Paste as Text",
        },
        "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.

Couleur du texte color

L’option text_color format ajoute des fonctionnalités de coloration du texte à l’éditeur.

<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>

<!-- Color removed -->
Plain text

Le plug-in analyse également les éléments <font color="..."> hérités à des fins de rétrocompatibilité.

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

HTML non pris en charge unsupported-html

Par défaut, les balises HTML inconnues sont supprimées lorsqu’elles sont analysées par l’éditeur. Pour les conserver, vous devez activer l’option de configuration unsupportedHtml :

const rteConfig = {
  unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};
Valeur
Comportement
false (par défaut)
Les balises HTML inconnues sont ignorées lors de l’analyse.
true
Les balises HTML inconnues sont enveloppées dans un nœud de bloc personnalisé non pris en charge afin que le contenu puisse faire l’objet d’un aller-retour en toute sécurité.

unsupportedHtmlOptions.structuralTags (facultatif) unsupportedhtmloptions

Utilisez unsupportedHtmlOptions.structuralTags pour contrôler quelles balises structurelles supplémentaires sont traitées comme des HTML prises en charge.

const rteConfig = {
  unsupportedHtml: true,
  unsupportedHtmlOptions: {
    structuralTags: ["div", "section"], // preserve configured tags as supported
  },
};
Valeur
Comportement
Omis/[]
Aucune balise structurelle supplémentaire n’est whitelistée.
["div"]
<div> est considéré comme pris en charge par HTML et n’est pas encapsulé comme non pris en charge.
["div", "section"]
<div> et <section> sont traités comme des HTML prises en charge et ne sont pas enveloppés comme des éléments non pris en charge.
NOTE
unsupportedHtmlOptions affecte uniquement le comportement lorsque unsupportedHtml est activé.

Lorsqu’il est activé, l’éditeur effectue le rendu des nœuds non pris en charge avec des balises wrapper (unsupported-block/unsupported-inline) et des classes wrapper. Les applications clientes doivent fournir le style de cette classe (par exemple, bordure, marge intérieure, arrière-plan). Le libellé de balise à l’intérieur du bloc utilise rte-unsupported-label, qui peut également être personnalisé.

  • rte-unsupported-block
  • rte-unsupported-inline
  • rte-unsupported-label

Les applications clientes doivent fournir un style pour ces classes (par exemple, bordure, espacement, arrière-plan et alignement sur la ligne).

Lorsque unsupportedHtml est activé, le client doit ajouter le module externe de nœuds non pris en charge (par exemple, createUnsupportedNodesPlugin()) afin que la copie d’un bloc ou d’un nœud intégré non pris en charge place son texte interne dans le presse-papiers (texte brut uniquement) et que les utilisateurs puissent coller le contenu ailleurs.

recommendation-more-help
experience-manager-cloud-service-help-main-toc