Documentación AEM as a Cloud Service Guía del usuario

Introducción al editor universal en AEM getting-started

Last update: Wed Feb 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Temas:
Desarrollo

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 sumergirse directamente en un ejemplo, puede revisar la aplicación de ejemplo Universal Editor en GitHub.

AEM Aunque el editor universal puede editar contenido desde cualquier fuente, este documento utiliza una aplicación de la aplicación de la como ejemplo. Este documento le guiará a través de estos pasos.

Instrumentación de la página instrument-page

El editor universal requiere una biblioteca JavaScript para procesar y editar la página en el editor.

Además, el servicio de editor universal requiere un nombre de recurso uniforme (URN) para identificar y utilizar el sistema backend correcto para el contenido en 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.

Incluir la biblioteca CORS del editor universal cors-library

Para que el editor universal se conecte a su aplicación, esta debe incluir la biblioteca CORS del editor universal. Añada el siguiente script a su aplicación.

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

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.
- system - Para extremos de conexión
- config - Para definir la configuración opcional
<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>">

Defina para qué rutas de contenido o `sling:resourceType` se debe abrir el Editor universal. (Opcional) content-paths

AEM Si tiene un proyecto de existente que usa el editor de páginas, cuando los autores de contenido editan las páginas, estas se abren automáticamente con el editor de páginas. AEM Puede definir qué editor debe abrirse en función de las rutas de contenido o de sling:resourceType, lo que hace que la experiencia sea perfecta para los autores, independientemente del editor que se requiera para el contenido seleccionado.

Abra el Administrador de configuración.

http://<host>:<port>/system/console/configMgr
Busque Servicio de URL del editor universal en la lista y haga clic en Editar los valores de configuración.
Defina para qué rutas de contenido o sling:resourceType se debe abrir el Editor universal.
- En el campo Asignación de apertura de editor universal, proporcione las rutas para las que se abre el editor universal.
- En el campo Sling:resourceTypes que abrirá el editor universal, proporcione una lista de los recursos que el editor universal abrirá directamente.
Haga clic en Guardar.

AEM Se abrirá el Editor universal para las páginas basadas en esta configuración en el siguiente orden.

AEM Se comprobarán las asignaciones en Universal Editor Opening Mapping y, si el contenido se encuentra en alguna de las rutas definidas, se abrirá el Editor universal para él.
AEM Para el contenido que no se encuentra en las rutas definidas en Universal Editor Opening Mapping, comprueba si el resourceType del contenido coincide con los definidos en Sling:resourceTypes, que abrirá el editor universal. Si el contenido coincide con uno de esos tipos, el editor universal se abrirá para él en ${author}${path}.html.
AEM De lo contrario, abre el Editor de páginas.

Las siguientes variables están disponibles para definir las asignaciones en el campo Asignación de apertura de editor universal.

path: ruta de contenido del recurso a abrir
localhost: entrada del externalizador para localhost sin esquema, p. ej. localhost:4502
author: entrada de externalizador para el autor sin esquema, p. ej. localhost:4502
publish: entrada de externalizador para publicación sin esquema, p. ej. localhost:4503
preview: entrada del externalizador para vista previa sin esquema, p. ej. localhost:4504
env: prod, stage, dev según los modos de ejecución de Sling definidos
token: token de consulta necesario para QueryTokenAuthenticationHandler

Asignaciones de ejemplo example-mappings

AEM Abra todas las páginas por debajo de /content/foo en el Autor de la:
- /content/foo:${author}${path}.html?login-token=${token}
- Esto resulta en abrir https://localhost:4502/content/foo/x.html?login-token=<token>
Abra todas las páginas por debajo de /content/bar en un servidor NextJS remoto y proporcione todas las variables como información:
- /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
- Esto resulta en abrir https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

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.

Introducción al editor universal: descubra cómo el editor universal permite editar cualquier aspecto de los contenidos en varias implementaciones para ofrecer experiencias excepcionales, aumentar la velocidad de contenido y proporcionar una experiencia de desarrollador de última generación.
Creación de contenido con el editor universal: aprenda lo fácil e intuitivo que es para los autores de contenido crearlo con el editor universal.
Publicación de contenido con el editor universal: aprenda cómo el editor universal publica contenido y cómo sus aplicaciones pueden gestionar el contenido publicado.
Arquitectura del editor universal: obtenga información acerca de la arquitectura del editor universal y cómo fluyen los datos entre sus servicios y capas.
Atributos y tipos: obtenga información acerca de los atributos y tipos de datos que requiere el editor universal.
Autenticación del editor universal: obtenga información sobre cómo se autentica el editor universal.

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab