Vous consultez actuellement l'aide de la version:

L’éditeur de texte enrichi met à la disposition des auteurs de nombreuses fonctionnalités pour modifier leur contenu textuel. Les icônes, les boîtes de dialogue de sélection, la barre d’outils et les menus sont fournis pour une expérience WYSIWYG de la modification de texte.

L’éditeur de texte enrichi peut être configuré pour activer, désactiver et étendre les fonctions disponibles dans les composants de création. Pour savoir comment utiliser les fonctions d’éditeur de texte enrichi pour la création, voir Utilisation de l’éditeur de texte enrichi pour la création.

Le workflow suivant illustre l’ordre dans lequel les tâches de configuration de l’éditeur de texte enrichi doivent être exécutées.

Workflow type de configuration de l’éditeur de texte enrichi
Workflow type de configuration de l’éditeur de texte enrichi

Présentation des IU tactile et classique

L’IU tactile est l’IU standard d’AEM. Adobe a introduit l’IU tactile avec responsive design pour l’environnement de création dans la version 5.6. Cette interface est conçue pour les ordinateurs de bureau et les appareils tactiles. L’IU diffère considérablement de l’IU classique original.

Barre d’outils d’éditeur de texte enrichi dans l’IU tactile
Barre d’outils d’éditeur de texte enrichi dans l’IU tactile
Barre d’outils d’éditeur de texte enrichi dans l’IU classique
Barre d’outils d’éditeur de texte enrichi dans l’IU classique

Voir également :

Différents modes de modification

Les auteurs peuvent créer et modifier du contenu textuel dans AEM en utilisant les différents modes des composants. Les options de la barre d’outils pour la création et la mise en forme du contenu, et l’expérience utilisateur des composants compatibles avec l’éditeur de texte enrichi dans différents modes de modification, varient en fonction des configurations d’éditeur de texte enrichi.

Mode de modification Zone de modification Fonctions dont l’activation est recommandée
IU tactile IU classique
En ligne Modification en ligne pour des modifications rapides et mineures ; mettez en forme sans ouvrir une zone de dialogue Fonctions minimales d’éditeur de texte enrichi O O
Éditeur de texte enrichi en plein écran Couvre la page entière
Toutes les fonctions requises d’éditeur de texte enrichi
O N
Boîte de dialogue Boîte de dialogue située en haut du contenu de page sans couvrir la page entière Toutes les fonctions requises d’éditeur de texte enrichi dans l’IU classique ; activez les fonctions judicieusement dans l’IU tactile
O O
Boîte de dialogue plein écran
Identique au mode plein écran ; contient des champs de la boîte de dialogue à côté de l’éditeur de texte enrichi
Toutes les fonctions requises d’éditeur de texte enrichi O N

Remarque :

La fonction de modification de source n’est pas disponible dans le mode de modification en ligne dans l’IU tactile. Vous ne pouvez pas faire glisser les images en mode plein écran. Toutes les autres fonctions sont utilisables dans tous les modes.

Modification en ligne

Une fois ouvert (avec une double pression ou un double clic lent), le contenu peut être modifié dans la page. Une barre d’outils compacte avec des options très basiques est présentée.

Modification en ligne avec une barre d’outils de base dans l’IU tactile
Modification en ligne avec une barre d’outils de base dans l’IU tactile

Dans l’IU classique, un double clic lent sur le composant permet la modification en ligne, et le contenu est encadré en orange. Si l’outil de recherche de contenu est ouvert, une barre d’outils avec les options de mise en forme disponibles de l’éditeur de texte enrichi est affichée en haut de la fenêtre. Si l’outil de recherche n’est pas ouvert, les options de mise en forme n’apparaissent pas, et vous pouvez uniquement effectuer des modifications de base sur le texte.

Modification en plein écran

Les composants AEM peuvent être ouverts dans une vue plein écran qui masque le contenu de la page et occupe l’écran disponible. Considérez la modification en plein écran comme une version détaillée de la modification en ligne, car elle offre le plus grand nombre d’options de modification. Vous pouvez l’ouvrir en cliquant sur  dans la barre d’outils compacte lorsque vous utilisez le mode de modification en ligne.

En mode de boîte de dialogue plein écran, outre une barre d’outils détaillée d’éditeur de texte enrichi, les options et les composants disponibles dans une boîte de dialogue sont également disponibles. Il s’applique seulement aux boîtes de dialogue qui contiennent l’éditeur de texte enrichi à côté d’autres composants.

Barre d’outils détaillée d’éditeur de texte enrichi lors de la modification en plein écran dans l’IU tactile
Barre d’outils détaillée d’éditeur de texte enrichi lors de la modification en plein écran dans l’IU tactile

Modification dans une boîte de dialogue

Lorsque vous double-cliquez sur un composant, une boîte de dialogue apparaît pour modifier le contenu. La boîte de dialogue s’ouvre dans la partie supérieure de la page existante. Dans quelques scénarios spécifiques, la boîte de dialogue s’affiche comme fenêtre contextuelle. Par exemple, quand un composant Texte fait partie d’une colonne dans une mise en page à plusieurs colonnes et que la zone disponible pour la boîte de dialogue est moindre.

Mode de modification dans une boîte de dialogue dans l’IU tactile
Mode de modification dans une boîte de dialogue dans l’IU tactile
Zone de dialogue dans l’IU classique qui contient la barre d’outils détaillée pour la modification
Zone de dialogue dans l’IU classique qui contient la barre d’outils détaillée pour la modification

À propos des modules externes d’éditeur de texte enrichi et des fonctions associées

Cette fonctionnalité est mise à disposition par le biais d’une série de modules externes, comportant chacun :

  • Une propriété features :
    • utilisée afin d’activer ou désactiver une fonctionnalité de base pour ce module externe ;
    • configurable selon une procédure normalisée.
  • Le cas échéant, des propriétés et options supplémentaires nécessitant une configuration spécialisée.

Les fonctions de base d’éditeur de texte enrichi sont activées, ou désactivées, par la valeur de la propriété features sur un nœud spécifique au module externe approprié.

Le tableau ci-dessous répertorie les modules externes actuels et indique les informations suivantes :

  • Les ID des modules externes avec un lien vers la documentation des API. L’ID est utilisé comme nom de nœud lors de l’activation d’un module externe.
  • Les valeurs admises pour la propriété features.
  • Une description de la fonctionnalité fournie par le module externe.

ID du module externe

Fonctions

Description

edit

cut
copy
paste-default
paste-plaintext
paste-wordhtml

Couper, copier et les trois modes de collage.

findreplace

find
replace

Rechercher et remplacer.

format

bold
italic
underline

Mise en forme textuelle de base.

image

image

Prise en charge de base des images (faire glisser à partir du contenu ou de l’outil de recherche de contenu). Selon le navigateur, la prise en charge présente différents comportements pour les auteurs.

keys

 

Pour définir cette valeur, voir taille de tabulation.

justify

justifyleft
justifycenter
justifyright

Alignement de paragraphe.

links

modifylink
unlink
anchor

Liens hypertextes et ancres.

lists

ordered
unordered
indent
outdent

Ce module externe contrôle à la fois la mise en retrait et les listes, y compris les listes imbriquées.

misctools

specialchars
sourceedit

Divers outils permettent aux auteurs de saisir des caractères spéciaux ou de modifier la source HTML. En outre, vous pouvez ajouter toute une gamme de caractères spéciaux si vous voulez définir votre propre liste.

Paraformat

paraformat

Les formats de paragraphe de défaut sont : Paragraphe, En-tête 1, En-tête 2 et En-tête 3 (<p>, <h1>, <h2> et <h3>). Vous pouvez ajouter davantage de formats de paragraphe ou prolonger la liste.

spellcheck

checktext

Vérificateur orthographique sensible à la langue.

styles

styles

Prise en charge de l’application d’un style en utilisant une classe CSS. Ajoutez de nouveaux styles de texte si vous voulez ajouter (ou étendre) votre propre gamme de styles utilisables avec du texte.

subsuperscript

subscript
superscript

Extensions des formats de base, ajoutant l’indice et l’exposant.

table

table
removetable
insertrow
removerow
insertcolumn
removecolumn
cellprops
mergecells
splitcell
selectrow
selectcolumns

Voir Configuration des styles de tableau si vous voulez ajouter vos propres styles pour des tableaux entiers ou des cellules individuelles.

undo

undo
redo

Taille de l’historique des opérations de rétablissement et d’annulation.

Remarque :

Le module externe Plein écran n’est pas pris en charge en mode de boîte de dialogue. Utilisation du paramètre dialogFullScreen afin de configurer la barre d’outils pour le mode plein écran.

Présentation des chemins et des emplacements de configuration

Mode de modification d’éditeur de texte enrichi (et de l’IU) que vous fournissez pour que les auteurs déterminent l’emplacement des informations de configuration lorsque vous activez les modules externes d’éditeur de texte enrichi :

Mode de modification Emplacement de l’IU tactile Emplacement de l’IU classique
En ligne cq:editConfig/cq:inplaceEditing
Plein écran cq:editConfig/cq:inplaceEditing Non applicable
Boîte de dialogue cq:dialog dialog
Boîte de dialogue plein écran cq:dialog Non applicable

Remarque :

Ne donnez pas le nom config au nœud sous cq:inplaceEditing. Sur le nœud cq:inplaceEditing, définissez les propriétés suivantes :

  • Nom : configPath
  • Type : String
  • Valeur : chemin du nœud qui contient la configuration proprement dite.

Ne donnez pas le nom config au nœud de configuration de l’éditeur de texte enrichi (RTE). Autrement, les configurations de l’éditeur de texte enrichi prennent effet seulement pour les administrateurs et non pour les utilisateurs du groupe content-author.

Configurez les propriétés suivantes qui s’appliquent uniquement au mode de modification dans la boîte de dialogue dans l’IU tactile :
  • useFixedInlineToolbar : configurez cette propriété booléenne définie sur le nœud d’éditeur de texte enrichi (une avec sling:resourceType=cq/gui/components/authoring/dialog/richtext) sur True pour que la barre d’outils de l’éditeur de texte enrichi reste fixe au lieu d’être flottante.
    Lorsque cette propriété est définie sur true, la modification en texte démarre par défaut sur l’événement « foundation-contentloaded ».
    Pour éviter cette situation, définissez la propriété customStart sur True et déclenchez l’événement « rte-start » pour commencer la modification avec l’éditeur de texte enrichi. Lorsque cette propriété est définie sur true, le comportement par défaut (l’éditeur de texte enrichi démarre en cas de clic) ne fonctionne pas.
  • customStart : configurez cette propriété booléenne définie sur le nœud de l’éditeur de texte enrichi sur True pour contrôler à quel moment démarrer l’éditeur de texte enrichi en déclenchant l’événement rte-start.
  • rte-start : déclenchez cet événement sur l’élément contenteditable-div d’éditeur de texte enrichi lorsque vous commencez la modification avec l’éditeur de texte enrichi. Cette option ne fonctionne que si customStart a été défini sur true.

Lorsque l’éditeur de texte enrichi est utilisé dans la boîte de dialogue optimisée pour les écrans tactiles, la définition de la propriété useFixedInlineToolbar sur true est obligatoire pour éviter des problèmes.

Activation des fonctionnalités d’éditeur de texte enrichi en activant des modules externes

Les fonctionnalités d’éditeur de texte enrichi sont rendues disponibles par l’intermédiaire d’une série de modules externes, chacun avec sa propriété features. Vous pouvez configurer la propriété features afin d’activer ou de désactiver une ou plusieurs fonctions de chaque module externe.

Pour consulter des configurations détaillées des modules externes de l’éditeur de texte enrichi, voir Activation et configuration des modules externes de l’éditeur de texte enrichi.

Remarque :

Le composant textuel Composants principaux permet aux éditeurs de modèle de configurer de nombreux modules externes de l’éditeur de texte enrichi dans une interface utilisateur graphique, ce qui évite d’avoir à effectuer une configuration technique.

Pour plus d’informations, voir Création de modèles de page et Documentation du développeur Core Components.

Remarque :

À titre de référence, les composants Texte par défaut (fournis dans le cadre d’une installation standard) se trouvent sous :

  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text

Pour créer votre propre composant textuel, copiez le composant ci-dessus au lieu de modifier ces composants.

Configuration de la barre d’outils de l’éditeur de texte enrichi

AEM vous permet de configurer différemment l’interface utilisateur de l’éditeur de texte enrichi pour les différents modes de modification. Les paramètres par défaut sont fournis ci-dessous. Vous pouvez remplacer ces paramètres par défaut en fonction de vos besoins.

Pour une meilleure expérience de création, activez seulement les modules externes sans fenêtre contextuelle afin d’obtenir une boîte de dialogue flottante de plus petite taille. Configurez les modules externes avec une plus grande fenêtre contextuelle, tels que le module externe Coller, de manière à ce qu’il soit activé uniquement dans une boîte de dialogue en plein écran.

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

Différents paramètres d’IU sont utilisés pour les modes en ligne et plein écran. La propriété toolbar est utilisée pour spécifier les boutons de la barre d’outils.

Par exemple, si le bouton est lui-même une fonctionnalité (par exemple, Gras), il est spécifié sous la forme « PluginName#FeatureName » (Links#modifylink, par exemple).

Si le bouton est un élément contextuel (contenant certaines fonctionnalités d’un module externe), il est spécifié sous la forme « #’PluginName » (#format, par exemple).

Les séparateurs ( | ) entre un groupe de boutons peuvent être spécifiés à l’aide de « – ».

Le nœud pop-up sous le mode en ligne ou plein écran contient la liste des éléments contextuels utilisés. Chaque nœud enfant sous le nœud « popovers » (éléments contextuels) est nommé en fonction du module externe (format, par exemple). Il possède des « éléments » de propriété contenant la liste des fonctions du module externe (format#bold, par exemple).

Personnalisation de l’association entre les commandes et les icônes de la barre d’outils

Vous pouvez personnaliser l’association entre les icônes de Coral affichées dans la barre d’outils de l’éditeur de texte enrichi et les commandes disponibles. Vous ne pouvez utiliser que les icônes de Coral.

  1. Créez un nœud intitulé icons sous uiSettings/cui.
  2. Sous ce nœud, créez des nœuds pour les différentes icônes.
  3. Sur chacun des nœuds d’icône, spécifiez une icône Coral et une commande à laquelle elle doit être associée.

Vous trouverez, ci-dessous, un exemple de fragment de code pour associer la commande Gras à l’icône Coral intitulée textItalic.

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true"> 
    <rtePlugins jcr:primaryType="nt:unstructured"> 
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/> 
    </rtePlugins> 
    <uiSettings jcr:primaryType="nt:unstructured"> 
        <cui jcr:primaryType="nt:unstructured"> 
            <inline jcr:primaryType="nt:unstructured" 
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]"> 
            </inline> 
            <icons jcr:primaryType="nt:unstructured"> 
                <bold jcr:primaryType="nt:unstructured" 
                    command="format#bold" 
                    icon="textItalic"/> 
            </icons> 
        </cui> 
    </uiSettings> 
</text>

Passage à l’éditeur de texte enrichi CoralUI 2

Sur une page, vous pouvez inclure la bibliothèque client (clientlib) d’éditeur de texte enrichi CoralUI 2 ou CoralUI 3. Par défaut, l’éditeur de texte enrichi comprend la bibliothèque client de CoralUI 3. Pour passer à l’éditeur de texte enrichi CoralUI 2, exécutez les étapes suivantes.

Remarque :

Adobe ne le recommande pas comme une bonne pratique. Passez à l’éditeur de texte enrichi CoralUI 2 en dernier recours. Les modules externes personnalisés pour l’éditeur de texte enrichi CoralUI 2 fonctionnent avec l’éditeur de texte CoralUI 3 s’ils ne dépendent pas d’éléments internes à l’éditeur de texte, tels que des classes.

Si vous employez des modules externes personnalisés pour l’éditeur de texte enrichi CoralUI 3, utilisez la bibliothèque rte.coralui3.

  1. Recouvrez le nœud /libs/cq/gui/components/authoring/editors/clientlibs/core sous /apps et effectuez les opérations suivantes :

    • Remplacez rte.coralui3 par rte.coralui2 pour la propriété dependencies.
    • Remplacez cq.authoring.editor.core.inlineediting.rte.coralui3 par cq.authoring.editor.core.inlineediting.rte.coralui2 pour la propriété embed.
    • Remplacez cq.authoring.rte.coralui3 par cq.authoring.rte.coralui2 pour la propriété embed.
  2. Recouvrez les nœuds /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 et /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 sous /apps.

    Supprimez la catégorie cq.authoring.dialog de /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 et ajoutez-la à /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2.

  3. Changez n’importe quelle autre dépendance incluse à la page de rte.coralui3 à rte.coralui2. Par exemple, après recouvrement du nœud /libs/mcm/campaign/components/touch-ui/clientlibs/rte sous /apps, changez toute dépendance correspondante de rte.coralui3 à rte.coralui2.

  4. Recouvrez le nœud cq/ui/widgets sous /apps. Remplacez la dépendance cq.rte au niveau du nœud /apps/cq/ui/widgets par cq.coralui2.rte.

Remarque :

L’éditeur de texte enrichi CoralUI 2 utilise des modèles handlebars pour les boîtes de dialogue des modules externes. Par conséquent, la bibliothèque client de l’éditeur de texte enrichi CoralUI 2 dépendait de la bibliothèque client handlebars. L’éditeur de texte enrichi CoralUI 3 n’utilise pas de modèles handlebars, et aucune dépendance n’y est associée. Si vos modules externes personnalisés utilisent des modèles handlebars, ajoutez la bibliothèque client handlebars dans votre page web.

Informations supplémentaires

Pour plus d’informations sur la configuration de l’éditeur de texte enrichi, voir la référence de l’API des widgets AEM.

En particulier, pour connaître les modules externes et les options associées disponibles :

  • Le composant CQ.form.RichText contient un champ de formulaire permettant de modifier les informations de texte stylisé (texte enrichi) : Pour connaître tous les paramètres disponibles pour le formulaire de texte enrichi, voir les options de configuration.
  • Le composant RichText fournit un large éventail de fonctionnalités en utilisant les modules externes répertoriés sous CQ.form.rte.plugins.Plugin. Pour chaque module externe :
    • voir les fonctions pour plus d’informations sur les fonctionnalités qui peuvent être activées (ou désactivées) ;
    • voir les options de configuration afin de connaître tous les paramètres disponibles pour la configuration détaillée du module externe approprié.
  • Vous trouverez également plus d’informations sur les règles HTML pour les liens.

Ces informations peuvent être utilisées pour étendre et personnaliser votre propre éditeur de texte enrichi, par exemple :

  • Pour répertorier les ancres disponibles dans la page en créant un lien, vous pouvez fournir votre propre mise en œuvre de LinkPlugin.

Limitations connues

Utilisation seulement dans des composants d’AEM

Les fonctionnalités de l’éditeur de texte enrichi sont prises en charge seulement dans les boîtes de dialogue des composants d’AEM. L’éditeur de texte enrichi n’est pas pris en charge sur les assistants ou les formulaires de base comme Propriétés de la page et Génération de modèles automatique sur l’IU tactile.

Ne fonctionne pas avec les dispositifs hybrides

AEM ne fonctionne pas sur les dispositifs hybrides.

Le nœud de configuration ne peut pas être nommé config

Ne donnez pas le nom config au nœud de configuration de l’éditeur de texte enrichi (RTE). Autrement, les configurations de l’éditeur de texte enrichi prennent effet seulement pour les administrateurs et non pour les utilisateurs du groupe content-author.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne