Show Menu
SUJETS×

Configuration de l’éditeur de texte enrichi

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.
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 . L’éditeur de texte enrichi peut être configuré pour activer, désactiver et étendre les fonctions disponibles dans les composants de création. Le flux de travail suivant illustre l’ordre recommandé d’exécution du de configuration RTE dans Experience Manager.
Figure : Flux de travaux standard pour configurer l’éditeur de texte enrichi

Présentation des IU tactile et classique

L’IU tactile est l’IU standard d’AEM. Adobe introduced Touch UI with responsive design for authoring environment, in version 5.6. The Touch UI is designed for touch and desktop devices. L’IU diffère considérablement de l’IU classique original.
Figure : Barre d’outils de l’éditeur de texte enrichi dans l’interface utilisateur tactile
Figure : Barre d’outils de l’éditeur de texte enrichi dans l’interface utilisateur classique

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
La fonction d’édition source n’est pas disponible en mode d’édition en ligne dans l’interface utilisateur 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 de base est présentée.
Figure : Modification en ligne avec barre d’outils de base dans l’interface utilisateur 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. It can be opened by clicking , from the compact toolbar when using the inline editing mode.
Le mode de boîte de dialogue plein écran affiche une barre d’outils détaillée d’éditeur de texte enrichi, ainsi que les options et les composants disponibles en mode de boîte de dialogue. Il s’applique seulement aux boîtes de dialogue qui contiennent l’éditeur de texte enrichi à côté d’autres composants.
Figure : Barre d’outils RTE détaillée lors de la modification en mode plein écran dans l’interface utilisateur tactile

Modification dans une boîte de dialogue

Lorsque vous double-cliquez sur un composant dans l’IU classique, une boîte de dialogue s’ouvre 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, lorsqu’un composant Texte fait partie d’une colonne dans une mise en page de plusieurs colonnes et que la zone disponible pour la boîte de dialogue est inférieure.
Figure : Mode de modification de la boîte de dialogue dans l’interface utilisateur tactile
Figure : Boîte de dialogue de l’interface utilisateur classique contenant une barre d’outils détaillée à modifier

À 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 features propriété :
    • utilisée afin d’activer ou de 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 des 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
features
Description
edit
cut copy paste-default paste-plaintext paste-wordhtml
find replace
Rechercher et remplacer.
bold italic underline
image
Prise en charge des images de base (faites glisser le curseur depuis le contenu ou l’outil de recherche de contenu). Selon le navigateur, la prise en charge présente différents comportements pour les auteurs
Pour définir cette valeur, voir taille de tabulation .
justifyleft justifycenter justifyright
Alignement de paragraphe.
modifylink unlink anchor
ordered unordered indent outdent
This plug-in controls both indentation and lists ; including nested lists.
specialchars sourceedit
Miscellaneous tools allow authors to enter special characters or edit the HTML source. Also, you can add a whole range of special characters if you want to define your own list.
Paraformat
paraformat
The default paragraph formats are Paragraph, Heading 1, Heading 2, and Heading 3 ( <p> , <h1> , <h2> , and <h3> ). Vous pouvez ajouter davantage de formats de paragraphe ou prolonger la liste.
spellcheck
checktext
styles
styles
Prise en charge du style à l’aide d’une classe CSS. Ajouter nouveaux styles de texte si vous souhaitez ajouter (ou étendre) votre propre plage de styles à utiliser avec du texte.
subsuperscript
subscript superscript
Extensions aux formats de base, ajout de sous-scripts et de super-scripts.
table
table removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns
See configure table styles , if you want to add your own styles for either entire tables or individual cells.
undo
undo redo
History size of undo and redo operations.
Le module externe Plein écran n’est pas pris en charge en mode de boîte de dialogue. Use of the dialogFullScreen setting to configure the toolbar for full screen mode.

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
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
Do not name the node under cq:inplaceEditing as config . On cq:inplaceEditing node, define the following properties:
  • 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). Otherwise, the RTE configurations take effect for only the administrators and not for the users in the group 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 : Définissez cette propriété booléenne définie sur le noeud RTE (un noeud avec sling:resourceType= cq/gui/components/authoring/dialog/richtext ) sur True , pour que la barre d’outils RTE soit fixe plutôt que 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``True sur 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.

Personnalisation de la modification en place

Vous pouvez définir sur quel sélecteur HTML le de l’éditeur de texte en configurant les propriétés suivantes :
  • editElementQuery - Définie le cq:InplaceEditingConfig , cette propriété est utilisée pour spécifier un sélecteur de l’élément HTML sur lequel la modification en ligne du composant de texte sera lancée. Si ce n’est pas le cas, la modification en ligne est directement lancée sur le composant HTML de texte.
  • textPropertyName - Définie le cq:InplaceEditingConfig , cette propriété est utilisée pour spécifier le nom de la propriété qui sera enregistrée sur le noeud de contenu où la valeur HTML du composant de texte sera conservée après la modification en ligne.
La propriété correspondante pour le mode de dialogue est name .

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 .
Téléchargez cet exemple de configuration pour comprendre comment configurer l’éditeur de texte enrichi. Dans ce module, toutes les fonctionnalités sont activées.
Le composant textuel Core Components permet aux éditeurs de modèle de configurer de nombreux modules externes de l’éditeur de texte enrichi en tant que stratégies de contenu dans l’interface utilisateur, rendant ainsi inutile toute configuration technique. Les stratégies de contenu peuvent fonctionner avec des configurations d’interface utilisateur de l’éditeur de texte enrichi comme indiqué. For more information, see the RTE user interface settings and content polices , Create page templates , and the Core Components developer documentation .
À 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 expérience de création optimale :
  • Dans une boîte de dialogue flottante, activez uniquement les modules externes sans fenêtre contextuelle, car les boîtes de dialogue de ce type sont plus petites.
  • In full screen dialog, enable all the required plug-ins, even the plug-ins with larger pop-up, such as the Paste plug-in. Use the dialogFullScreen configuration described below.
<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. For example, if the button is itself a feature (for example, Bold ), it is specified as PluginName#FeatureName (for example, links#modifylink ). If the button is a popover (containing some features of a plug-in), it is specified as #PluginName (for example, #format ). 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. Each child node under the popovers node is named after the plug-in (for example, format ). It has a property items containing a list of features of the plug-in (for example, format#bold ).

Paramètres de l’interface utilisateur de l’éditeur de texte enrichi et stratégies de contenu

Les administrateurs peuvent contrôler les options de l’éditeur de texte enrichi à l’aide de stratégies de contenu, au lieu de procéder à la configuration en suivant les instructions ci-dessus, par exemple. Les stratégies de contenu définissent les propriétés de conception d’un composant lorsqu’il est utilisé dans le cadre d’un modèle modifiable . Par exemple, si un composant textuel qui utilise l’éditeur de texte enrichi est employé avec un modèle modifiable, la stratégie de contenu peut définir que l’option Gras doit être disponible, au même titre que quelques options de mise en forme de paragraphe. Les stratégies de contenu sont réutilisables et peuvent être appliquées à plusieurs modèles.
À partir d’AEM 6.4 Service Pack 3, les options disponibles dans l’éditeur texte enrichi sont transmises depuis les configurations de l’interface utilisateur en amont vers les stratégies de contenu.
  • Les paramètres de configuration de l’interface utilisateur définissent les options disponibles pour les stratégies de contenu.
  • Si la configuration de l’interface utilisateur de RTE a été supprimée ou n’active pas un élément, la stratégie de contenu ne peut pas le configurer.
  • Un auteur n’a accès à une fonctionnalité de ce type que si elle est mise à sa disposition par les configurations de l’interface utilisateur et les stratégies de contenu.
Pour consulter un exemple, reportez-vous à la documentation du composant principal Texte .

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. Create a node named icons under uiSettings/cui .
  2. Sous ce nœud, créez des nœuds pour les différentes icônes.
  3. Sur chacun des noeuds d’icône individuels, spécifiez une icône Coral et une commande à mapper à l’icône.
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 CoralUI 2 RTE clientlib ou CoralUI 3 RTE clientlib. 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.
Adobe déconseille d’effectuer ce changement. 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 , utilisez la bibliothèque rte.coralui3 3.
  1. Recouvrez le noeud /libs/cq/gui/components/authoring/editors/clientlibs/core sous /apps , puis procédez comme suit :
    • Replace rte.coralui3 with rte.coralui2 for the dependencies property.
    • Replace cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
    • Replace cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 for the embed property.
  2. Incrustez les noeuds /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 et /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 sous /apps .
    Supprimez les de cq.authoring.dialog de /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 et ajoutez-les à /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 . For example, after overlaying the node /libs/mcm/campaign/components/touch-ui/clientlibs/rte under /apps , change any dependency on it from rte.coralui3 to rte.coralui2 .
  4. Overlay the node cq/ui/widgets under /apps . Remplacez la dépendance cq.rte au niveau du noeud /apps/cq/ui/widgets par cq.coralui2.rte .
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 Fonctionnalités pour en savoir plus sur les fonctionnalités qui peuvent être activées (ou désactivées).
    • Voir Options de configuration pour tous les paramètres disponibles pour une configuration détaillée du module externe approprié.
  • Vous trouverez également plus d’informations sur les règles HTML pour les liens.
Les options ci-dessus 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

La fonctionnalité AEM RTE présente les limites suivantes :
  • 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.
  • AEM ne fonctionne pas sur les dispositifs hybrides .
  • Do not name the RTE configuration node config . Otherwise, the RTE configuration takes effect for only the administrators and not for the users in the group content-author .
  • RTE ne prend pas en charge les images intégrées ni les iframes pour incorporer un contenu.