DocumentationAEM as a Cloud ServiceGuide de l’utilisateur

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

Last update: Thu Sep 18 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • S'applique à :
  • Experience Manager as a Cloud Service

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 passer directement à un exemple, consultez l’application d’exemple de l’éditeur universel sur GitHub.

Bien que l’éditeur universel puisse modifier du contenu provenant de n’importe quelle source, ce document utilisera une application AEM comme exemple. Ce document vous guidera tout au long de ces étapes.

Instrumenter la page instrument-page

L’éditeur universel nécessite une bibliothèque JavaScript pour afficher et modifier la page dans l’éditeur.

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

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

Pour que l’éditeur universel puisse se connecter à votre application, votre application doit inclure la bibliothèque CORS de l’éditeur universel. Ajoutez le script suivant à votre application.

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

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

<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 votre URN de connexion pour définir les points de terminaison du service et de l’extension si nécessaire.

Si vous préférez ne pas utiliser le service d’éditeur universel, 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 du service par défaut fourni par l’éditeur universel, définissez votre propre point d’entrée de service.

  • Nom de la balise meta : urn:adobe:aue:config:service
  • Contenu de la balise meta : content="https://adobe.com" (exemple)
<meta name="urn:adobe:aue:config:service" content="<url>">

Si vous souhaitez activer uniquement certaines extensions pour une page, vous pouvez définir ce paramètre dans une balise meta. Pour récupérer les extensions, définissez les points d’entrée de l’extension.

  • Nom de la balise meta : urn:adobe:aue:config:extensions
  • Contenu de la balise meta : content="https://adobe.com,https://anotherone.com,https://onemore.com" (exemple)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Définissez les chemins de contenu ou les sling:resourceType pour lesquels l’éditeur universel doit être ouvert. (Facultatif) content-paths

Si vous disposez d’un projet AEM existant utilisant l’éditeur de page, lorsque les auteurs de contenu modifient des pages, celles-ci s’ouvrent automatiquement dans l’éditeur de page. Vous pouvez définir quel éditeur AEM doit ouvrir en fonction des chemins de contenu ou du sling:resourceType, ce qui garantit une expérience fluide pour les personnes responsables du contenu, quel que soit l’éditeur requis pour le contenu sélectionné.

  1. Ouvrez le gestionnaire de configuration.

    http://<host>:<port>/system/console/configMgr

  2. Recherchez Service d’URL de l’éditeur universel dans la liste, puis cliquez sur Modifier les valeurs de configuration.

  3. Définissez pour quels chemins d’accès au contenu ou sling:resourceType 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, indiquez la liste des ressources qui sont ouvertes directement par l’éditeur universel.

  4. Cliquez sur Enregistrer.

  5. Vérifiez votre configuration de l’externaliseur et assurez-vous au minimum que les environnements local, de création et de publication sont définis comme dans l’exemple suivant.

    code language-text 
    "local $[env:AEM_EXTERNALIZER_LOCAL;default=http://localhost:4502]",
"author $[env:AEM_EXTERNALIZER_AUTHOR;default=http://localhost:4502]",
"publish $[env:AEM_EXTERNALIZER_PUBLISH;default=http://localhost:4503]"

Une fois ces étapes de configuration terminées, AEM ouvre l’éditeur universel pour les pages dans l’ordre suivant.

  1. AEM vérifie les mappages sous Universal Editor Opening Mapping, et si le contenu se trouve sous l’un des chemins d’accès définis, l’éditeur universel s’ouvre pour celui-ci.
  2. Pour le contenu ne se trouvant pas sous les chemins d’accès définis dans Universal Editor Opening Mapping, AEM vérifie si les resourceType du contenu correspondent à ceux définis dans Sling:resourceTypes qui doit être ouvert par l’éditeur universel. Si le contenu correspond à l’un de ces types, l’éditeur universel s’ouvre pour celui-ci à l’adresse ${author}${path}.html.
  3. Sinon, AEM ouvre l’éditeur de page.

Les variables suivantes sont disponibles pour définir vos mappages dans le champ Mappage d’ouverture de l’éditeur universel.

  • path : chemin d’accès au contenu de la ressource à ouvrir
  • localhost : entrée de l’externaliseur pour le localhost sans schéma, par exemple localhost:4502
  • author : entrée de l’externaliseur pour la création sans schéma, par exemple localhost:4502
  • publish : entrée de l’externaliseur pour la publication sans schéma, par exemple localhost:4503
  • preview : entrée de l’externaliseur pour la prévisualisation sans schéma, par exemple localhost:4504
  • env : prod, stage, dev en fonction des modes d’exécution Sling définis
  • token : jeton de requête requis pour le QueryTokenAuthenticationHandler

Exemples de mappages example-mappings

  • Ouvrez toutes les pages sous /content/foo dans l’instance de création 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>.

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.

NOTE
Si vous utilisez l’éditeur universel dans un cas d’usage découplé, votre application découplée doit gérer sa propre authentification.

Ressources supplémentaires additional-resources

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

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