El editor universal universal-editor

AEM Obtenga información acerca de la flexibilidad del editor universal y cómo puede ayudarle a potenciar sus experiencias sin encabezado mediante el uso de la versión 6.5 de.

Información general overview

El editor universal es un editor visual versátil que forma parte de Adobe Experience Manager Sites. Permite a los autores editar lo que se ve es lo que se obtiene (WYSIWYG) de cualquier experiencia sin encabezado.

  • AEM Los autores se benefician de la flexibilidad del editor universal, ya que es compatible con la misma edición visual coherente para todas las formas de contenido sin encabezado de la.
  • Los desarrolladores se benefician de la versatilidad del editor universal, ya que también admite el desacoplamiento real de la implementación. Permite a los desarrolladores utilizar prácticamente cualquier marco o arquitectura de su elección, sin imponer restricciones de SDK o tecnología.

Consulte la documentación de AEM as a Cloud Service en el editor universal para obtener más información.

Arquitectura architecture

AEM El editor universal es un servicio que funciona en conjunto con la creación de contenido sin encabezado, lo que lo convierte en una herramienta de creación de contenido sin encabezado.

  • AEM El editor universal está alojado en https://experience.adobe.com/#/aem/editor/canvas y puede editar las páginas procesadas por la versión 6.5 de la versión de.
  • AEM AEM El editor universal lee la página de la a través de Dispatcher desde la instancia de autor.
  • El servicio de editor universal, que se ejecuta en el mismo host que Dispatcher AEM, vuelve a escribir los cambios en la instancia de autor de la.

Flujo de autor mediante el editor universal

Configuración setup

Para probar el editor universal, deberá hacer lo siguiente:

Una vez completada la configuración, puede instrumentar sus aplicaciones para que utilicen el editor universal.

AEM Actualización de update-aem

AEM AEM Se requieren los Service Pack 21 o 22 y un paquete de funciones para el uso de la versión del editor universal con la versión 6.5 de.

Aplicar el paquete de servicio más reciente latest

AEM Asegúrese de que está ejecutando al menos el Service Pack 21 o 22 para la versión 6.5 de la versión de la aplicación de la versión 3.00000000000000000000000000000000000000000000000. Puede descargar el Service Pack más reciente desde Distribución de software.

Instalación del paquete de funciones del editor universal feature-pack

AEM Instale el paquete de funciones del editor universal para la versión 6.5 disponible en la distribución de software.

Si ya está ejecutando el Service Pack 23 o superior, el paquete de funciones no es necesario.

Configurar servicios configure-services

El paquete de funciones instala una serie de paquetes nuevos para los que se necesita una configuración adicional.

  1. Abra el Administrador de configuración.
    • http://<host>:<port>/system/console/configMgr
  2. Busque Controlador de autenticación de token de Granite de Adobe en la lista y haga clic en Cambiar los valores de configuración.
  3. En el cuadro de diálogo, cambie el atributo SameSite para el valor de la cookie del token de inicio de sesión (token.samesite.cookie.attr) a Partitioned.
  4. Haga clic en Guardar.

Quitar la opción X-Frame de encabezados SAMEORIGIN. sameorigin

  1. Abra el Administrador de configuración.
    • http://<host>:<port>/system/console/configMgr
  2. Busque Apache Sling Main Servlet en la lista y haga clic en Editar los valores de configuración.
  3. Elimine el valor X-Frame-Options=SAMEORIGIN del atributo Encabezados de respuesta adicionales (sling.additional.response.headers) si existe.
  4. Haga clic en Guardar.

Configure el Controlador de autenticación del parámetro de consulta de Adobe Granite. query-parameter

  1. Abra el Administrador de configuración.
    • http://<host>:<port>/system/console/configMgr
  2. Busque Controlador de autenticación de parámetro de Adobe Granite Query en la lista y haga clic en Editar los valores de configuración.
  3. En el campo Ruta (path), agregue / para habilitar.
    • Un valor vacío deshabilita el controlador de autenticación.
  4. Haga clic en Guardar.

Defina para qué rutas de contenido o sling:resourceTypes se abrirá el editor universal. paths

  1. Abra el Administrador de configuración.

    • http://<host>:<port>/system/console/configMgr
  2. Busque Servicio de URL del editor universal en la lista y haga clic en Editar los valores de configuración.

  3. Defina para qué rutas de contenido o sling:resourceTypes se 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.
  4. Haga clic en Guardar.

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

  1. 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.
  2. 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.
  3. AEM De lo contrario, abre el Editor de páginas.

Las siguientes variables están disponibles para definir las asignaciones en Universal Editor Opening Mapping.

  • 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:

  • 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>

Configuración del servicio de editor universal set-up-ue

AEM Con la actualización y la configuración de la aplicación, puede configurar un servicio de editor universal local para su propio desarrollo y pruebas locales.

  1. Instale la versión de Node.js >=20.

  2. Descargue y desempaquete el servicio de editor universal más reciente de Distribución de software

  3. Configure el servicio de editor universal mediante variables de entorno o el archivo .env.

  4. Ejecutar universal-editor-service.cjs

Actualización de Dispatcher update-dispatcher

AEM Con el servicio de editor universal local configurado y en ejecución, tendrá que permitir un proxy inverso para el nuevo servicio en Dispatcher.

  1. Ajuste el archivo vhost de la instancia de autor para incluir un proxy inverso.

    code language-html
    <IfModule mod_proxy.c>
     ProxyPass "/universal-editor" "http://localhost:8080"
     ProxyPassReverse "/universal-editor" "http://localhost:8080"
    </IfModule>
    
    note note
    NOTE
    8080 es el puerto predeterminado. Si ha cambiado esto usando el parámetro UES_PORT en su archivo .env, debe ajustar el valor del puerto aquí en consecuencia.
  2. Reinicie Apache.

Instrumentar su aplicación instrumentation

AEM Con el servicio de editor universal local actualizado y en ejecución, puede empezar a editar contenido sin encabezado con el editor universal.

Sin embargo, la aplicación debe estar instrumentada para aprovechar las ventajas del editor universal. Esto implica incluir metaetiquetas para instruir al editor sobre cómo y dónde conservar el contenido. Los detalles de esta instrumentación están disponibles en la documentación del editor universal para AEM as a Cloud Service.

Tenga en cuenta que cuando se sigue la documentación del Editor universal con AEM as a Cloud Service AEM, se aplican los siguientes cambios al utilizarlo con.5.

  • El protocolo de la metaetiqueta debe ser aem65 en lugar de aem.

    code language-html
    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>
    
  • El punto final del servicio de editor universal debe anunciarse mediante una etiqueta meta.

    code language-html
    <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>
    
  • En la sección plugins de la definición de componentes, se debe usar aem65 en lugar de aem.

TIP
AEM Para obtener una guía completa para desarrolladores que empiecen a usar el Editor universal, consulte el documento Información general del Editor universal para desarrolladores en la documentación de AEM as a Cloud Service AEM, teniendo en cuenta los cambios necesarios para la compatibilidad con la versión 6.5 de, tal como se menciona en esta sección.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2