Éditeur universel universal-editor
Découvrez la flexibilité de l’éditeur universel et comment il peut vous aider à alimenter vos expériences découplées à l’aide d’AEM 6.5.
Vue d’ensemble overview
L’éditeur universel est un éditeur visuel polyvalent qui fait partie d’Adobe Experience Manager Sites. Il permet aux auteurs d’effectuer une modification ce que vous voyez est ce que vous obtenez (WYSIWYG) de n’importe quelle expérience découplée.
- Les auteurs bénéficient de la flexibilité de l’éditeur universel, car il prend en charge la même modification visuelle cohérente pour toutes les formes de contenu découplé AEM.
- Les développeurs bénéficient de la polyvalence de l’éditeur universel, car il prend également en charge le vrai découplage de l’implémentation. Il permet aux développeurs d’utiliser quasiment n’importe quel framework ou architecture de leur choix, sans imposer de contraintes de SDK ou de technologie.
Veuillez consulter la documentation d’AEM as a Cloud Service sur l’éditeur universel pour plus d’informations.
Architecture architecture
L’éditeur universel est un service qui fonctionne en tandem avec AEM pour créer du contenu en mode découplé.
- L’éditeur universel est hébergé sur
https://experience.adobe.com/#/aem/editor/canvas
et peut modifier les pages rendues par AEM 6.5. - La page AEM est lue par l’éditeur universel via le Dispatcher à partir de l’instance de création AEM.
- Le service d’éditeur universel, qui s’exécute sur le même hôte que le Dispatcher, réécrit les modifications dans l’instance de création AEM.
Configuration setup
Pour tester l’éditeur universel, vous devez effectuer les opérations suivantes :
Une fois la configuration terminée, vous pouvez instrumenter vos applications pour utiliser l’éditeur universel.
Mettre à jour AEM update-aem
Les pack de services 21 ou 22 et un pack de fonctionnalités pour AEM sont requis pour utiliser l’éditeur universel avec AEM 6.5.
Appliquer le dernier pack de services latest
Assurez-vous d’exécuter au moins le pack de services 21 ou 22 pour AEM 6.5. Vous pouvez télécharger le dernier pack de services à partir de Distribution logicielle.
Installation du pack de fonctionnalités de l’éditeur universel feature-pack
Installez le pack de fonctionnalités de l’éditeur universel pour AEM 6.5 disponible dans la distribution logicielle..
Si vous exécutez déjà le pack de services 23 ou une version ultérieure, le pack de fonctionnalités n’est pas nécessaire.
Configuration des services configure-services
Le pack de fonctionnalités installe un certain nombre de nouveaux packages pour lesquels une configuration supplémentaire est nécessaire.
Définissez l’attribut SameSite pour le cookie login-token
. samesite-attribute
- Ouvrez Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Recherchez Gestionnaire d’authentification de jeton Granite d’Adobe dans la liste, puis cliquez sur Modifier les valeurs de configuration.
- Dans la boîte de dialogue, remplacez l’attribut SameSite pour le cookie du jeton de connexion (
token.samesite.cookie.attr
) parPartitioned
. - Cliquez sur Enregistrer.
Supprimez l’option X-Frame des en-têtes SAMEORIGIN
. sameorigin
- Ouvrez Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Localisez le Servlet principal Apache Sling dans la liste, puis cliquez sur Modifier les valeurs de configuration.
- Supprimez la valeur
X-Frame-Options=SAMEORIGIN
de l’attribut En-têtes de réponse supplémentaires (sling.additional.response.headers
) s’il existe. - Cliquez sur Enregistrer.
Configurez le gestionnaire d’authentification de paramètre de requête Granite Adobe. query-parameter
- Ouvrez Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Recherchez Gestionnaire d’authentification de paramètre de requête Granite Adobe dans la liste, puis cliquez sur Modifier les valeurs de configuration.
- Dans le champ Chemin d’accès (
path
), ajoutez des/
à activer.- Une valeur vide désactive le gestionnaire d’authentification.
- Cliquez sur Enregistrer.
Définissez pour quels chemins d’accès au contenu ou sling:resourceTypes
l’éditeur universel doit être ouvert. paths
-
Ouvrez Configuration Manager.
http://<host>:<port>/system/console/configMgr
-
Recherchez Service d’URL de l’éditeur universel dans la liste, puis cliquez sur Modifier les valeurs de configuration.
-
Définissez pour quels chemins d’accès au contenu ou
sling:resourceTypes
l’éditeur universel doit être ouvert.- Dans le champ Mappage d’ouverture de l’éditeur universel indiquez les chemins d’accès pour lesquels l’éditeur universel est ouvert.
- Dans le champ Sling:resourceTypes qui doit être ouvert par l’éditeur universel, fournissez une liste de ressources ouvertes directement par l’éditeur universel.
-
Cliquez sur Enregistrer.
AEM ouvre l’éditeur universel pour les pages basées sur cette configuration.
- AEM vérifie les mappages sous
Universal Editor Opening Mapping
et si le contenu se trouve sous l’un des chemins d’accès qui y sont définis, l’éditeur universel s’ouvre pour lui. - Pour le contenu ne se trouvant pas sous les chemins définis dans
Universal Editor Opening Mapping
, AEM vérifie si leresourceType
du contenu correspond à ceux définis dans Sling:resourceTypes qui doivent être ouverts par l’éditeur universel et si le contenu correspond à l’un de ces types, l’éditeur universel est ouvert pour lui à l’${author}${path}.html
. - Sinon, AEM ouvre l’éditeur de page.
Les variables suivantes sont disponibles pour définir vos mappages sous Universal Editor Opening Mapping
.
path
: chemin d’accès au contenu de la ressource à ouvrirlocalhost
: entrée du service Externalizer pour leslocalhost
sans schéma, par exemplelocalhost:4502
author
: entrée du service Externalizer pour l’auteur sans schéma, par exemplelocalhost:4502
publish
: entrée du service Externalizer pour la publication sans schéma, par exemplelocalhost:4503
preview
: entrée du service Externalizer pour la prévisualisation sans schéma, par exemplelocalhost:4504
env
:prod
,stage
,dev
en fonction des modes d’exécution Sling définistoken
: jeton de requête requis pour leQueryTokenAuthenticationHandler
Exemples de mappages :
-
Ouvrez toutes les pages sous
/content/foo
sur l’auteur AEM :/content/foo:${author}${path}.html?login-token=${token}
- Cela entraîne l’ouverture de
https://localhost:4502/content/foo/x.html?login-token=<token>
-
Ouvrez toutes les pages sous
/content/bar
sur un serveur NextJS distant, en fournissant toutes les variables comme informations/content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
- Cela entraîne l’ouverture de
https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>
Configuration du service d’éditeur universel set-up-ue
Avec AEM mis à jour et configuré, vous pouvez configurer un service d’éditeur universel local pour votre propre développement et vos propres tests locaux.
-
Installez Node.js version >=20.
-
Téléchargez et décompressez le dernier service d’éditeur universel à partir de Distribution logicielle.
-
Configurez le service d’éditeur universel via des variables d’environnement ou un fichier
.env
.- Voir la documentation sur l’éditeur universel d’AEM as a Cloud Service pour plus d’informations.
- Notez que vous devrez peut-être utiliser l’option
UES_MAPPING
si une réécriture IP interne est requise.
-
Exécutez
universal-editor-service.cjs
.
Mettre à jour le Dispatcher update-dispatcher
Avec AEM configuré et un service d’éditeur universel local en cours d’exécution, vous devez autoriser un proxy inverse pour le nouveau service dans le Dispatcher.
-
Ajustez le fichier vhost de l’instance de création pour inclure un proxy inverse.
code language-html <IfModule mod_proxy.c> ProxyPass "/universal-editor" "http://localhost:8080" ProxyPassReverse "/universal-editor" "http://localhost:8080" </IfModule>
note note NOTE Le port par défaut est le port 8080. Si vous avez modifié ce paramètre à l’aide du paramètre UES_PORT
dans votre fichier.env
, vous devez ajuster la valeur du port ici en conséquence. -
Redémarrez Apache.
Instrumenter Votre Application instrumentation
Avec AEM mis à jour et un service d’éditeur universel local en cours d’exécution, vous pouvez commencer à modifier le contenu découplé à l’aide de l’éditeur universel.
Cependant, votre application doit être instrumentée pour tirer parti de l’éditeur universel. Cela implique d’inclure des balises méta pour indiquer à l’éditeur comment et où conserver le contenu. Les détails de cette instrumentation sont disponibles dans la documentation de l’éditeur universel pour AEM as a Cloud Service..
Notez que lorsque vous suivez la documentation pour l’éditeur universel avec AEM as a Cloud Service, les modifications ci-dessous s’appliquent lors de son utilisation avec AEM 6.5.
-
Le protocole dans la balise meta doit être
aem65
au lieu deaem
.code language-html <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>
-
Le point d’entrée du service de l’éditeur universel doit être annoncé par le biais d’une balise meta .
code language-html <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>
-
Dans la section
plugins
de la définition des composants,aem65
doit être utilisé à la place deaem
.
Différences entre AEM 6.5 et AEM as a Cloud Service differences
L’éditeur universel d’AEM 6.5 fonctionne globalement de la même manière que dans AEM as a Cloud Service, y compris pour l’interface utilisateur et une grande partie de la configuration. Il y a cependant des différences à noter.
- L’éditeur universel d’ 6.5 prend uniquement en charge le cas d’utilisation découplé.
- La configuration de l’éditeur universel varie légèrement pour 6.5 (comme décrit dans le document actuel).
- L’éditeur universel dans la version 6.5 utilise un sélecteur de ressources et un sélecteur de fragments de contenu différents d’AEM as a Cloud Service.