Configuration de l’éditeur de texte enrichi configure-the-rich-text-editor

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 apportent une expérience WYSIWYG de la modification des textes. Les administrateurs configurent l’éditeur de texte enrichi pour activer, désactiver et étendre les fonctions disponibles dans les composants de création. Découvrez comment les auteurs utilisent l’éditeur de texte enrichi pour créer du contenu web.

Les concepts et les étapes de configuration de l’éditeur de texte enrichi sont répertoriés ci-dessous.

Présentation de l’interface utilisateur disponible pour les auteurs understand-rte-ui

L’interface de l’éditeur de texte enrichi s’appuie sur une approche de responsive design pour l’environnement de création. Elle est conçue pour être utilisée sur les appareils tactiles et de bureau.

Figure : Barre d’outils de l’éditeur de texte enrichi avec toutes les options disponibles activées.

La barre d’outils contient les options nécessaires pour une expérience de création WYSIWYG. Les administrateurs d’Experience Manager peuvent configurer les options disponibles dans la barre d’outils de l’interface. Un ensemble complet d’options de modification est disponible par défaut dans Experience Manager. Les développeurs peuvent personnaliser Experience Manager pour ajouter d’autres options de modification.

Différents modes de modification editingmodes

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

Modification en ligne inline-editing

Pour modifier le contenu d’une page, ouvrez-le en double-cliquant lentement dessus. Une barre d’outils compacte avec des options de base est présentée.

Figure : Modification en ligne avec les options de base dans la barre d’outils.

Modification en plein écran full-screen-editing

Les composants Experience Manager 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.

Dans le 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.

Figure : Barre d’outils détaillée de l’éditeur de texte enrichi au cours d’une modification en mode plein écran.

Modification dans une boîte de dialogue dialog-editing

Lorsqu’un composant fait l’objet d’un double clic, une boîte de dialogue s’ouvre permettant de modifier le contenu. La boîte de dialogue s’affiche en haut de la page existante. Dans certains scénarios spécifiques, la boîte de dialogue s’ouvre sous la forme d’une fenêtre pop-up. C’est notamment le cas lorsqu’un composant Texte fait partie d’une colonne dans une disposition à plusieurs colonnes et que la zone disponible pour la boîte de dialogue est moindre.

Figure : Mode de modification dans une boîte de dialogue.

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

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

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 suivant répertorie les plug-ins actuels et présente les informations suivantes :

Présentation des chemins et des emplacements de configuration understand-the-configuration-paths-and-locations

Mode de modification d’éditeur de texte enrichi et de l’interface 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. Les emplacements sont les suivants :

Configurez les propriétés suivantes qui s’appliquent uniquement au mode de modification dans la boîte de dialogue :

Lorsque l’éditeur de texte enrichi est utilisé dans la boîte de dialogue tactile, définissez la propriété useFixedInlineToolbar sur true pour éviter les problèmes.

Activation des fonctionnalités d’éditeur de texte enrichi en activant des modules externes enable-rte-functionalities-by-activating-plug-ins

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 pour activer ou désactiver les différentes fonctionnalités de chaque plug-in.

Pour obtenir des configurations détaillées des plug-ins d’éditeur de texte enrichi, voir Comment activer et configurer les plug-ins d’éditeur de texte enrichi.

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 politiques de contenu dans l’interface utilisateur, rendant ainsi inutile toute configuration technique. Les politiques de contenu peuvent fonctionner avec les configurations d’interface utilisateur de l’éditeur de texte enrichi décrites dans ce document. Pour plus d’informations, voir Création de modèles de page ainsi que la Documentation destinée aux développeurs relatifs aux composants principaux.

À 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 dialogfullscreen

Experience Manager vous permet de configurer différemment l’interface 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. Vous personnalisez uniquement les fonctionnalités de la barre d’outils que vous souhaitez fournir à vos auteurs. Vous n’avez pas besoin de définir toutes les configurations de barre d’outils.

Pour configurer la barre d’outils pour dialogFullScreen, utilisez l’exemple de configuration suivant.

<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,justify#justifyjustify]"
          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,justify#justifyjustify,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’interface utilisateur sont utilisés pour le mode en ligne et le mode plein écran. La propriété toolbar spécifie l’option de la barre d’outils.

Par exemple, si l’option est elle-même une fonctionnalité (par exemple, Bold), elle est spécifiée sous la forme PluginName#FeatureName (par exemple, links#modifylink).

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

Les séparateurs (|) dans un groupe d’options peuvent être spécifiés par le signe -.

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).

Paramètres de l’interface utilisateur de l’éditeur de texte enrichi et politiques de contenu rtecontentpolicies

L’administration peut contrôler les options de l’éditeur de texte enrichi à l’aide de politiques de contenu, par exemple au lieu d’effectuer la configuration décrite ci-dessus. Les politiques 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 de texte qui utilise l’éditeur de texte enrichi est utilisé avec un modèle modifiable, la politique de contenu peut définir que l’option gras est disponible, à l’instar de quelques options de mise en forme de paragraphe. Les politiques de contenu sont réutilisables et peuvent être appliquées à plusieurs modèles.

Les options disponibles dans l’éditeur de texte enrichi sont transmises depuis les configurations de l’interface utilisateur en amont vers les politiques 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 iconstoolbar

Vous pouvez personnaliser l’association entre les icônes 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 Coral.

Vous trouverez, ci-dessous, un exemple de fragment de code pour associer la commande Bold à l’icône Coral nommé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>

Limitations connues known-limitations

Les fonctionnalités de l’éditeur de texte enrichi de Experience Manager présentent les limites suivantes :

Bonnes pratiques et astuces best-practices-and-tips