DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

Prise en main de l’éditeur universel dans AEM getting-started

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Administration
  • Développeur

Découvrez comment accéder à l’éditeur universel et comment commencer à instrumenter votre première application AEM pour l’utiliser.

TIP
Si vous préférez plonger directement dans un exemple, vous pouvez consulter la section Exemple d’application de l’éditeur universel sur GitHub.

Étapes d’intégration onboarding

Bien que l’éditeur universel puisse modifier du contenu à partir de n’importe quelle source, ce document utilise une application AEM comme exemple.

Il existe plusieurs étapes pour intégrer votre application AEM et l’instrumenter pour utiliser l’éditeur universel.

  1. Incluez la bibliothèque principale de l’éditeur universel.
  2. Ajoutez la configuration OSGi nécessaire.
  3. Instrumentez la page.

Ce document vous guidera tout au fil de ces étapes.

Inclure la bibliothèque principale de l’éditeur universel core-library

Avant que votre application puisse être instrumentée pour être utilisée avec l’éditeur universel, elle doit inclure la dépendance suivante.

@adobe/universal-editor-cors

Pour activer l’instrumentation, l’importation suivante doit être ajoutée à votre index.js.

import "@adobe/universal-editor-cors";

Alternative pour les applications autres que React alternative

Si vous ne mettez pas en oeuvre d’application React et/ou avez besoin d’un rendu côté serveur, une autre méthode consiste à inclure les éléments suivants dans le corps du document.

<script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST" async></script>

La dernière version est toujours recommandée, mais les versions précédentes du service peuvent être référencées en cas de modifications entraînant une rupture.

  • https://universal-editor-service.experiencecloud.live/corslib/LATEST - La toute dernière bibliothèque CORS de l’UE
  • https://universal-editor-service.experiencecloud.live/corslib/2/LATEST - La dernière bibliothèque CORS de l’UE sous la version 2.x
  • https://universal-editor-service.experiencecloud.live/corslib/2.1/LATEST - La dernière bibliothèque CORS de l’UE sous la version 2.1.x
  • https://universal-editor-service.experiencecloud.live/corslib/2.1.1 - La bibliothèque CORS de l’UE exacte version 2.1.1

Ajouter les configurations OSGi nécessaires osgi-configurations

Pour pouvoir modifier du contenu AEM avec votre application à l’aide de l’éditeur universel, les paramètres CORS et des cookies doivent être définis dans AEM.

Les configurations OSGi suivantes doivent être définies sur l’instance de création AEM.

  • SameSite Cookies = None dans com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
  • Supprimez l’en-tête X-FRAME-OPTIONS: SAMEORIGIN dans org.apache.sling.engine.impl.SlingMainServlet

com.day.crx.security.token.impl.impl.TokenAuthenticationHandler samesite-cookies

Le cookie du jeton de connexion doit être envoyé à AEM en tant que domaine tiers. Par conséquent, le cookie du même site doit être défini explicitement sur None.

Cette propriété doit être définie dans la configuration OSGi com.day.crx.security.token.impl.impl.TokenAuthenticationHandler.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="sling:OsgiConfig"
          token.samesite.cookie.attr="None" />

org.apache.sling.engine.impl.SlingMainServlet sameorigin

X-Frame-Options: SAMEORIGIN empêche le rendu de pages AEM dans un iframe. La suppression de l’en-tête permet de charger les pages.

Cette propriété doit être définie dans la configuration OSGi org.apache.sling.engine.impl.SlingMainServlet.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:OsgiConfig"
          sling.additional.response.headers="[X-Content-Type-Options=nosniff]"/>

Instrumenter la page instrument-page

Le service de l’éditeur universel requiert un nom de ressource uniforme (URN) pour identifier et utiliser le système principal approprié pour le contenu de l’application en cours de modification. Par conséquent, un schéma URN est nécessaire pour mapper le contenu aux ressources de contenu.

Création de connexions connections

Les connexions utilisées dans l’application sont stockées sous la forme de balises <meta> dans la page <head>.

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">

  • <category> - Il s’agit d’une classification de la connexion avec deux options.

  • <referenceName> : il s’agit d’un nom court réutilisé dans le document pour identifier la connexion. Par exemple, aemconnection

  • <protocol> : indique le plug-in de persistance du service de persistance de l’éditeur universel à utiliser. Par ex. aem

  • <url> : il s’agit de l’URL vers le système où les modifications doivent être conservées. Par ex. http://localhost:4502

L’identifiant urn:adobe:aue:system représente la connexion à l’éditeur universel d’Adobe.

Les data-aue-resource utilisent le préfixe urn pour raccourcir l’identifiant.

data-aue-resource="urn:<referenceName>:<resource>"
  • <referenceName> : il s’agit de la référence nommée mentionnée dans la balise <meta>. Par ex. aemconnection
  • <resource> : il s’agit d’un pointeur vers la ressource du système cible. Par ex., un chemin de contenu AEM tel que /content/page/jcr:content
TIP
Consultez le document Attributs et types pour plus d’informations sur les attributs et les types de données requis par l’éditeur universel.

Exemple de connexion example

<meta name="urn:adobe:aue:system:<referenceName>" content="<protocol>:<url>">

<html>
<head>
    <meta name="urn:adobe:aue:system:aemconnection" content="aem:https://localhost:4502">
    <meta name="urn:adobe:aue:system:fcsconnection" content="fcs:https://example.franklin.adobe.com/345fcdd">
</head>
<body>
        <aside>
          <ul data-aue-resource="urn:aemconnection:/content/example/list" data-aue-type="container">
            <li data-aue-resource="urn:aemconnection:/content/example/listitem" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">Jane Doe</p>
              <p data-aue-prop="title" data-aue-type="text">Journalist</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>

...

            <li data-aue-resource="urn:fcsconnection:/documents/mytext" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">John Smith</p>
              <p data-aue-resource="urn:aemconnection:/content/example/another-source" data-aue-prop="title" data-aue-type="text">Photographer</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>
          </ul>
        </aside>
</body>
</html>

Paramètres de configuration configuration-settings

Vous pouvez utiliser le préfixe config dans l’URL de votre connexion pour définir les points d’entrée de service et d’extension si nécessaire.

Si vous ne souhaitez pas utiliser le service Universal Editor, qui est hébergé par Adobe, mais votre propre version hébergée, vous pouvez le définir dans une balise META. Pour remplacer le point d’entrée de service par défaut fourni par Universal Editor, définissez votre propre point d’entrée de service :

  • Nom de métadonnées - urn:adobe:aue:config:service
  • Métadonnées - content="https://adobe.com" (exemple)
<meta name="urn:adobe:aue:config:service" content="<url>">

Si vous souhaitez uniquement que certaines extensions soient activées pour une page, vous pouvez le définir dans une balise meta . Pour récupérer les extensions, définissez les points de fin d’extension :

  • Nom méta : urn:adobe:aue:config:extensions
  • Métadonnées : content="https://adobe.com,https://anotherone.com,https://onemore.com" (exemple)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Vous pouvez désormais utiliser l’éditeur universel. youre-ready

Votre application est désormais instrumentée pour utiliser l’éditeur universel

Reportez-vous à Création de contenu avec l’éditeur universel et découvrez à quel point il est facile et intuitif pour les auteurs et autrices de créer du contenu à l’aide de l’éditeur universel.

Ressources supplémentaires additional-resources

Pour en savoir plus sur l’éditeur universel, consultez ces documents.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab