DocumentaciónAEM as a Cloud ServiceGuía del usuario

Introducción al editor universal en AEM getting-started

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

Creado para:

  • Administrador
  • Desarrollador

Obtenga información sobre cómo acceder al editor universal y cómo instrumentar la primera aplicación de AEM para utilizarlo.

TIP
Si prefiere ir directamente a un ejemplo, puede revisar la Aplicación de muestra del editor universal en GitHub.

Pasos para la incorporación onboarding

Aunque el editor universal puede editar contenido desde cualquier fuente, este documento utilizará una aplicación AEM como ejemplo.

AEM Hay que seguir varios pasos para incorporar la aplicación de e instrumentarla para que utilice el editor universal.

  1. Incluya la biblioteca principal del editor universal.
  2. Añada la configuración OSGi necesaria.
  3. Instrumente la página.

Este documento le guiará a través de estos pasos.

Incluya la biblioteca principal del editor universal core-library

Para poder instrumentar la aplicación para su uso con el editor universal, debe incluir la siguiente dependencia.

@adobe/universal-editor-cors

Para activar la instrumentación, se debe agregar la siguiente importación a su index.js.

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

Alternativa para aplicaciones que no sean React alternative

Si no va a implementar una aplicación React o requiere un procesamiento del lado del servidor, otro método consiste en incluir lo siguiente en el cuerpo del documento.

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

Siempre se recomienda la versión más reciente, pero se puede hacer referencia a las versiones anteriores del servicio en caso de cambios importantes.

  • https://universal-editor-service.experiencecloud.live/corslib/LATEST: la última biblioteca UE CORS
  • https://universal-editor-service.experiencecloud.live/corslib/2/LATEST: la última biblioteca UE CORS en la versión 2.x
  • https://universal-editor-service.experiencecloud.live/corslib/2.1/LATEST: la última biblioteca UE CORS en la versión 2.1.x
  • https://universal-editor-service.experiencecloud.live/corslib/2.1.1: la versión 2.1.1 exacta de la biblioteca UE CORS

Añada las configuraciones de OSGi necesarias osgi-configurations

Para poder editar contenido en su aplicación con el editor universal en AEM, es necesario realizar la configuración de cookies y CORS.

Deberá establecer las siguientes configuraciones de OSGi en la instancia de creación de AEM.

  • SameSite Cookies = None en com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
  • Elimine el encabezado X-FRAME-OPTIONS: SAMEORIGIN enorg.apache.sling.engine.impl.SlingMainServlet

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

La cookie del token de inicio de sesión debe enviarse a AEM como un dominio de terceros. Por lo tanto, la cookie del mismo sitio deberá configurarse explícitamente como None.

Esta propiedad debe establecerse en la configuración de 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 evita el procesamiento de páginas AEM dentro del iframe. Al eliminar el encabezado, se pueden cargar las páginas.

Esta propiedad debe establecerse en la configuración de 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]"/>

Instrumentación de la página instrument-page

El servicio de editor universal requiere un nombre de recurso uniforme (URN) para identificar y utilizar el sistema back-end correcto para el contenido de la aplicación que se está editando. Por lo tanto, se requiere un esquema URN para volver a asignar contenido a los recursos de contenido.

Creación de conexiones connections

Las conexiones que se utilizan en la aplicación se almacenan como etiquetas <meta> en la <head> de la página.

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

  • <category>: esta es una clasificación de la conexión con dos opciones.

  • <referenceName>: se trata de un nombre corto que se reutiliza en el documento para identificar la conexión. P. ej., aemconnection

  • <protocol>: indica qué complemento de persistencia utilizar del servicio de persistencia del editor universal. P. ej., aem

  • <url>: esta es la URL del sistema en la que deben persistir los cambios. P. ej., http://localhost:4502

El identificador urn:adobe:aue:system representa la conexión para el Editor universal de Adobe.

data-aue-resource utilizará el prefijo urn para abreviar el identificador.

data-aue-resource="urn:<referenceName>:<resource>"
  • <referenceName>: esta es la referencia mencionada en la etiqueta <meta>. P. ej., aemconnection
  • <resource>: es un puntero al recurso en el sistema de destino. P. ej., una ruta de contenido AEM como /content/page/jcr:content
TIP
Consulte el documento Atributos y tipos para obtener más información sobre los atributos y tipos de datos que requiere el editor universal.

Conexión de ejemplo 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>

Opciones de configuración configuration-settings

Puede usar el prefijo config en el URN de conexión para establecer los extremos de servicio y extensión si es necesario.

Si no desea utilizar el servicio de editor universal, que se aloja mediante Adobe, sino su propia versión alojada, puede establecerlo en una metaetiqueta. Para sobrescribir el extremo de servicio predeterminado que proporciona el Editor universal, establezca su propio extremo de servicio:

  • Meta name - urn:adobe:aue:config:service
  • Meta content - content="https://adobe.com" (ejemplo)
<meta name="urn:adobe:aue:config:service" content="<url>">

Si solo desea tener ciertas extensiones habilitadas para una página, puede establecerlas en una metaetiqueta. Para recuperar extensiones, establezca los extremos de la extensión:

  • Meta name: urn:adobe:aue:config:extensions
  • Meta content: content="https://adobe.com,https://anotherone.com,https://onemore.com" (ejemplo)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Todo listo para usar el editor Universal youre-ready

La aplicación ya está instrumentada para utilizar el editor universal.

Diríjase aCreación de contenido con el editor universal para descubrir lo fácil e intuitivo que es para los autores de contenido crearlo con el editor universal.

Recursos adicionales additional-resources

Para obtener más información acerca del editor universal, consulte estos documentos.

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