Acerca del editor universal universal-editor
Obtenga información acerca de la flexibilidad del editor universal y cómo puede ayudarle a potenciar sus experiencias sin encabezado con AEM 6.5 LTS.
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.
- Los autores se benefician de la flexibilidad del editor universal. Admite la misma edición visual coherente para todas las formas de contenido sin encabezado de AEM.
- Los desarrolladores se benefician de la versatilidad del editor universal, ya que también admite el desacoplamiento verdadero de la implementación. Permite a los desarrolladores utilizar prácticamente cualquier marco o arquitectura de su elección, sin imponer restricciones SDK o tecnológicas.
Consulte la documentación de AEM as a Cloud Service sobre el editor universal para obtener más información.
Arquitectura architecture
El editor universal es un servicio que funciona junto con AEM para crear contenido headless.
- El editor universal está alojado en
https://experience.adobe.com/#/aem/editor/canvasy puede editar páginas procesadas por AEM 6.5 LTS. - El editor universal lee la página de AEM a través de Dispatcher desde la instancia de autor de AEM.
- El servicio de editor universal, que se ejecuta en el mismo host que Dispatcher, vuelve a escribir los cambios en la instancia de autor de AEM.
Requisitos requirements
Lo siguiente es compatible con el editor universal:
- AEM 6.5 LTS GA
- Se admite el alojamiento On-Premise y de Adobe Managed Services (AMS).
- AEM 6.5
- Se admiten tanto el alojamiento on-premise como el alojamiento AMS.
- AEM as a Cloud Service (versión
2023.8.13099o superior)
Este documento se centra en la compatibilidad con AEM 6.5 LTS del editor universal. Para utilizar el editor universal con AEM 6.5 LTS, necesita lo siguiente:
- AEM 6.5 LTS GA
- Dispatcher correctamente configurado
Configuración setup
Para utilizar el editor universal, haga lo siguiente:
Una vez completada la configuración, puede instrumentar sus aplicaciones para que utilicen el editor universal.
Configurar servicios configure-aem
El editor universal se basa en una serie de servicios que deben configurarse.
Establezca el atributo SameSite para la cookie login-token. samesite-attribute
- Abra el Administrador de configuración.
http://<host>:<port>/system/console/configMgr
- Busque Controlador de autenticación de token de Adobe Granite en la lista y haga clic en Cambiar los valores de configuración.
- 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) aPartitioned. - Haga clic en Guardar.
Quitar la opción X-Frame de encabezados SAMEORIGIN. sameorigin
- Abra el Administrador de configuración.
http://<host>:<port>/system/console/configMgr
- Busque Servlet principal de Apache Sling en la lista y haga clic en Editar los valores de configuración.
- Elimine el valor
X-Frame-Options=SAMEORIGINdel atributo Encabezados de respuesta adicionales (sling.additional.response.headers) si existe. - Haga clic en Guardar.
Configuración del controlador de autenticación del parámetro de consulta de Adobe Granite query-parameter
- Abra el Administrador de configuración.
http://<host>:<port>/system/console/configMgr
- Busque Controlador de autenticación del parámetro de consulta de Adobe Granite en la lista y haga clic en Editar los valores de configuración.
- En el campo Ruta (
path), añada/para habilitarlo.- Un valor vacío deshabilita el controlador de autenticación.
- Haga clic en Guardar.
Defina las rutas de contenido o sling:resourceTypes que se abrirán en el editor universal paths
-
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:resourceTypesse abrirá el editor universal.- En el campo Asignación de apertura del editor universal, proporcione las rutas para las que se abre el editor universal.
- En el campo Sling:resourceTypes que abrirá el editor universal, escriba una lista de recursos que el editor universal abrirá directamente.
-
Haga clic en Guardar.
-
Compruebe su configuración del externalizador y asegúrese, como mínimo, de que tiene los entornos local, de autor y de publicación establecidos como en el siguiente ejemplo:
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]"
Una vez completados estos pasos de configuración, AEM abre el Editor universal para páginas en el siguiente orden:
-
AEM comprueba las asignaciones de
Universal Editor Opening Mappingy, si el contenido se encuentra en alguna de las rutas definidas, se abre el Editor universal para él. -
Para el contenido fuera de las rutas definidas en
Universal Editor Opening Mapping, AEM comprueba si el contenidoresourceTypecoincide con una entrada de Sling:resourceTypes que abrirá el editor universal. Si coincide, AEM abre el contenido en el editor universal en${author}${path}.html. -
De lo contrario, AEM 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 que se abrelocalhost: entrada del externalizador paralocalhostsin esquema, por ejemplo,localhost:4502author: entrada de externalizador para el autor sin esquema, por ejemplo,localhost:4502publish: entrada del externalizador para la publicación sin esquema, por ejemplo,localhost:4503preview: entrada del externalizador para vista previa sin esquema, por ejemplo,localhost:4504env:prod,stage,devsegún los modos de ejecución de Sling definidostoken: token de consulta necesario paraQueryTokenAuthenticationHandler
Asignaciones de ejemplo:
-
Abra todas las páginas de
/content/fooen AEM Author:/content/foo:${author}${path}.html?login-token=${token}- Resultados al abrir
https://localhost:4502/content/foo/x.html?login-token=<token>
-
Abra todas las páginas de
/content/baren 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}- Resultados al 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
Con AEM actualizado y configurado, puede configurar un servicio de editor universal local para sus procesos de desarrollo y pruebas locales.
-
Instale la versión de Node.js >=20.
-
Descargue y desempaquete el servicio de editor universal más reciente de Distribución de software
-
Configure el servicio de editor universal mediante variables de entorno o el archivo
.env.- Consulte la documentación del editor universal de AEM as a Cloud Service para obtener más información.
- Tenga en cuenta que es posible que necesite utilizar la opción
UES_MAPPINGsi se requiere una reescritura de IP interna.
-
Ejecute
universal-editor-service.cjs
Actualice Dispatcher update-dispatcher
Con AEM configurado y un servicio de editor universal local en ejecución, debe permitir un proxy inverso para el nuevo servicio en Dispatcher.
-
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_PORTen su archivo.env, debe ajustar el valor del puerto aquí en consecuencia. -
Reinicie Apache.
Instrumente su aplicación instrumentation
Con AEM actualizado y un servicio de editor universal local en ejecución, puede comenzar a editar contenido headless mediante el editor universal.
Sin embargo, la aplicación debe estar instrumentada para aprovechar las ventajas del editor universal. Incluye 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, se aplican los siguientes cambios al utilizarlo con AEM 6.5 LTS.
-
El protocolo de la metaetiqueta debe ser
aem65, en lugar deaem.code language-html <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/> -
El punto final del servicio del editor universal debe anunciarse mediante una metaetiqueta.
code language-html <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/> -
En la sección
pluginsde la definición de componentes, se debe usaraem65, en lugar deaem.
Diferencias entre AEM 6.5 LTS y AEM as a Cloud Service differences
El editor universal de AEM 6.5 LTS funciona en términos generales igual que en AEM as a Cloud Service, incluida la interfaz de usuario y gran parte de la configuración. Sin embargo, hay diferencias que debe tener en cuenta.
- El editor universal de 6.5 LTS solo admite el caso de uso sin encabezado.
- La configuración del editor universal varía ligeramente para 6.5 LTS (como se describe en el documento actual).
- El editor universal de 6.5 LTS utiliza un selector de recursos y un selector de fragmentos de contenido diferentes a los de AEM as a Cloud Service.