Configuration de l’éditeur de texte enrichi configure-the-rich-text-editor
L’éditeur de texte enrichi (RTE) offre aux 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.
Pour savoir comment utiliser les fonctions de l’éditeur de texte enrichi pour la création, consultez la section 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 workflow suivant illustre l’ordre dans lequel les tâches de configuration de l’éditeur de texte enrichi doivent être exécutées dans Experience Manager.
Figure : Workflow type de configuration de l’éditeur de texte enrichi
Présentation des IU tactile et classique understand-touch-enabled-ui-and-classic-ui
L’IU tactile est l’IU standard pour AEM. Adobe a introduit l’interface utilisateur tactile avec responsive design pour l’environnement de création, dans la version 5.6. L’interface utilisateur tactile est conçue pour les appareils tactiles et de bureau. L’IU diffère considérablement de l’IU classique d’origine.
* : barre d’outils d’éditeur de texte enrichi dans l’IU tactile*
* : barre d’outils d’éditeur de texte enrichi dans l’IU classique*
Différents modes de modification editingmodes
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 de contenu, ainsi que l’expérience utilisateur des composants activés dans l’éditeur de texte enrichi dans différents modes de modification, varient selon les configurations de l’éditeur de texte enrichi.
Modification en ligne inline-editing
Une fois ouvert (avec un double appui/clic lent), le contenu peut être modifié dans la page. Une barre d’outils compacte avec des options de base est présentée.
* : modification en ligne avec une barre d’outils basiques dans l’IU tactile*
Dans l’interface utilisateur classique, un double-clic lent sur le composant permet la modification en ligne et un contour orange met le contenu en surbrillance. Si l’outil de recherche de contenu est ouvert, une barre d’outils contenant les options de mise en forme d’éditeur de texte enrichi s’affiche 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 full-screen-editing
AEM composants 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.
Le mode Boîte de dialogue plein écran fournit une barre d’outils détaillée de l’éditeur de texte enrichi, ainsi que les options et les composants disponibles dans le mode Boîte de dialogue. Cela ne s’applique qu’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*
Modification dans une boîte de dialogue dialog-editing
Lorsque vous double-cliquez sur un composant dans l’interface utilisateur classique, une boîte de dialogue s’ouvre pour modifier le contenu. La boîte de dialogue s’ouvre 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 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*
* : boîte de dialogue dans l’IU classique qui contient la barre d’outils détaillée pour la modification*
À 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 :
-
Propriété
features
:- Il est utilisé pour activer ou désactiver les fonctionnalités de base de ce module externe.
- Il peut être configuré selon une procédure normalisée.
-
Le cas échéant, davantage de propriétés et d’options 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 suivant répertorie les modules externes actuels, avec les éléments suivants :
- ID de module externe avec un lien vers la documentation de l’API. L’ID est utilisé comme nom de noeud lorsque activation d’un module externe.
- Les valeurs admises pour la propriété
features
. - Une description de la fonctionnalité fournie par le module externe.
<p>
, <h1>
, <h2>
et <h3>
). Vous pouvez ajout de formats de paragraphe ou étendez la liste.dialogFullScreen
pour configurer la barre d’outils en mode plein écran.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’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 :
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
cq:dialog
dialog
cq:dialog
cq:inplaceEditing
au nœud sous config
. 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.
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
) surTrue
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
surTrue
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 surTrue
pour contrôler à quel moment démarrer l’éditeur de texte enrichi en déclenchant l’événementrte-start
. -
rte-start
: déclenchez cet événement sur l’élémentcontenteditable-div
d’éditeur de texte enrichi lorsque vous commencez la modification avec l’éditeur de texte enrichi. Cette option ne fonctionne que sicustomStart
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 l’édition statique customizing-in-place-editing
Vous pouvez définir sur quel sélecteur HTML l’éditeur de texte se lance en configurant les propriétés suivantes :
editElementQuery
- Définie surcq:InplaceEditingConfig
, cette propriété est utilisée pour spécifier un sélecteur de l’élément de HTML sur lequel la modification en ligne pour le composant de texte sera lancée. Si elle n’est pas spécifiée, la modification en ligne est directement lancée en HTML de Composant Texte.textPropertyName
- Définie surcq:InplaceEditingConfig
, cette propriété est utilisée pour spécifier le nom de la propriété qui sera enregistrée sur le nœud de contenu où la valeur HTML de composant de texte sera conservée après la modification en ligne.
La propriété correspondante pour le mode de boîte de dialogue est name
.
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 module externe.
Pour obtenir des configurations détaillées des modules externes d’éditeur de texte enrichi, voir comment activer et configurer les modules externes d’éditeur de texte enrichi.
Téléchargez cet exemple de configuration pour comprendre comment configurer l’éditeur de texte enrichi. Dans ce package, toutes les fonctionnalités sont activées.
/libs/wcm/foundation/components/text
/libs/foundation/components/text
Configuration de la barre d’outils de l’éditeur de texte enrichi dialogfullscreen
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 :
- Dans une boîte de dialogue flottante, activez uniquement les modules externes qui ne comportent pas de fenêtre contextuelle, car la boîte de dialogue flottante est plus petite.
- Dans une boîte de dialogue plein écran, activez tous les modules externes requis, y compris ceux avec une fenêtre contextuelle plus grande, comme
Paste
plug-in . Utilisez la variabledialogFullScreen
configuration décrite ci-dessous.
<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, Bold
), il est spécifiée comme PluginName#FeatureName
(par exemple, links#modifylink
). Si le bouton est un élément contextuel (contenant certaines fonctionnalités d’un module externe), il est spécifié sous la forme #PluginName
(par exemple, #format
). Séparateurs ( | ) entre un groupe de boutons peut être spécifié avec "-".
Le nœud pop-up sous le mode en ligne ou plein écran contient la liste des éléments contextuels utilisés. Chaque noeud enfant sous popovers
est nommé d’après le module externe (par exemple, format
). Il possède une propriété . items
contenant une liste des fonctionnalités du module externe (par exemple, format#bold
).
Paramètres de l’interface utilisateur de l’éditeur de texte enrichi et stratégies de contenu rtecontentpolicies
Les administrateurs peuvent contrôler les options de l’éditeur de texte enrichi à l’aide de stratégies de contenu, par exemple au lieu d’effectuer la configuration comme décrit ci-dessus. Les stratégies de contenu définissent les propriétés de conception d’un composant lorsqu’il est utilisé dans le cadre d’une 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 stratégie de contenu peut définir que l’option gras est disponible et que quelques options de mise en forme de paragraphe sont disponibles. Les stratégies de contenu sont réutilisables et peuvent être appliquées à plusieurs modèles.
À compter de la version 6.4 Service Pack 3, les options disponibles dans l’éditeur de texte enrichi sont transmises depuis les configurations de l’interface utilisateur en aval 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 un élément a été supprimé ou n’est pas activé par la configuration d’interface utilisateur de l’éditeur de texte enrichi, 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 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.
-
Créez un nœud intitulé
icons
sousuiSettings/cui
. -
Sous ce nœud, créez des nœuds pour les différentes icônes.
-
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 switch-to-coralui-rich-text-editor
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 l’éditeur de texte enrichi CoralUI 3. Pour passer à l’éditeur de texte enrichi CoralUI 2, procédez comme suit.
rte.coralui3
.-
Recouvrez le nœud
/libs/cq/gui/components/authoring/editors/clientlibs/core
sous/apps
et procédez comme suit :- Remplacez
rte.coralui3
parrte.coralui2
pour la propriété dependencies. - Remplacez
cq.authoring.editor.core.inlineediting.rte.coralui3
parcq.authoring.editor.core.inlineediting.rte.coralui2
pour la propriété embed. - Remplacez
cq.authoring.rte.coralui3
parcq.authoring.rte.coralui2
pour la propriété embed.
- Remplacez
-
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 une 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
. -
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
, remplacez toute dépendancerte.coralui3
correspondante parrte.coralui2
. -
Recouvrez le nœud
cq/ui/widgets
sous/apps
. Remplacez la dépendancecq.rte
au niveau du nœud/apps/cq/ui/widgets
parcq.coralui2.rte
.
Informations supplémentaires further-information
Pour plus d’informations sur la configuration de l’éditeur de texte enrichi, voir API AEM Widget référence.
En particulier, pour afficher les modules externes et les options connexes disponibles :
-
Le CQ.form.RichText Le composant fournit un champ de formulaire pour la modification des informations de texte stylisé (texte enrichi). Pour connaître tous les paramètres disponibles pour le formulaire de texte enrichi, voir Options de configuration.
-
Le composant RichText fournit un large éventail de fonctionnalités grâce aux modules externes répertoriés sous CQ.form.rte.plugins.Plugin. Pour chaque module externe :
- Pour plus d’informations sur les fonctionnalités qui peuvent être activées (ou désactivées), voir Fonctionnalités .
- Voir les Options de configuration pour tous les paramètres disponibles pour une configuration détaillée du module externe approprié.
-
Des informations supplémentaires sur les règles de HTML pour les liens sont également disponibles.
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
.
Limites connues known-limitations
La fonctionnalité AEM RTE présente les limites suivantes :
-
Les fonctionnalités de l’éditeur de texte enrichi sont prises en charge uniquement dans les boîtes de dialogue de composant AEM. L’éditeur de texte enrichi n’est pas pris en charge sur les assistants ou les formulaires Foundation tels que Propriétés de la page et Génération de modèles automatique sur l’interface utilisateur tactile.
-
AEM ne fonctionne pas sur Appareils hybrides.
-
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 groupecontent-author
. -
L’éditeur de texte enrichi ne prend pas en charge les images intégrées ni les iframes pour incorporer un contenu.