Show Menu
TEMAS×

Información general del editor de SPA

Las aplicaciones de una sola página (SPA) pueden oferta experiencias atractivas para los usuarios de sitios web. Los desarrolladores quieren poder crear sitios con marcos de SPA y los autores quieren editar contenido dentro de AEM sin problemas para un sitio creado con dichos marcos.
El Editor de SPA oferta una solución completa para admitir SPA dentro de AEM. Esta página ofrece información general sobre cómo se estructura la compatibilidad con SPA en AEM, cómo funciona el Editor de SPA y cómo se AEM sincronizando el marco de SPA.
El Editor de SPA es la solución recomendada para proyectos que requieren procesamiento del cliente basado en el marco de SPA (por ejemplo, React o Angular).

Introducción

Los sitios creados con marcos de SPA comunes como React y Angular cargan su contenido a través de JSON dinámico y no proporcionan la estructura HTML necesaria para que el Editor de páginas AEM pueda colocar controles de edición.
Para habilitar la edición de SPA dentro de AEM, se necesita una asignación entre la salida JSON de la SPA y el modelo de contenido en el repositorio de AEM para guardar los cambios en el contenido.
La compatibilidad con SPA en AEM introduce una capa de JS delgada que interactúa con el código JS de SPA cuando se carga en el Editor de páginas con el que se pueden enviar eventos y la ubicación de los controles de edición se puede activar para permitir la edición en contexto. Esta función se basa en el concepto de extremo de Content Services API, ya que el contenido del SPA debe cargarse a través de Content Services.
Para obtener más información sobre las ZPE en AEM, consulte los siguientes documentos:

Diseño

El componente de página de un SPA no proporciona los elementos HTML de sus componentes secundarios mediante el archivo JSP o HTL. Esta operación se delega en el marco de la EPA. La representación de los componentes o modelos secundarios se obtiene como una estructura de datos JSON del JCR. A continuación, los componentes de SPA se agregan a la página según esa estructura. Este comportamiento diferencia la composición de cuerpo inicial del componente de página de la de los homólogos que no son de SPA.

Administración de modelos de página

La resolución y la administración del modelo de página se delegan en una PageModel biblioteca proporcionada. El SPA debe utilizar la biblioteca del modelo de página para inicializarse y ser creado por el editor de SPA. Biblioteca de modelo de página proporcionada indirectamente al componente de página de AEM a través de aem-react-editable-components npm. El modelo de página es un intérprete entre AEM y la SPA y, por lo tanto, siempre debe estar presente. Cuando se crea la página, se cq.authoring.pagemodel.messaging debe agregar una biblioteca adicional para habilitar la comunicación con el editor de páginas.
Si el componente de página SPA hereda del componente principal de la página, hay dos opciones para que la categoría de biblioteca del cq.authoring.pagemodel.messaging cliente esté disponible:
  • Si la plantilla es editable, agréguela a la directiva de página.
  • O bien, agregue las categorías mediante el customfooterlibs.html .
Para cada recurso del modelo exportado, el SPA asignará un componente real que realizará el procesamiento. El modelo, representado como JSON, se procesa mediante las asignaciones de componentes de un contenedor.
La inclusión de la cq.authoring.pagemodel.messaging categoría debe limitarse al contexto del Editor de la SPA.

Tipo de datos de comunicación

Cuando se agrega la cq.authoring.pagemodel.messaging categoría a la página, se enviará un mensaje al Editor de páginas para establecer el tipo de datos de comunicación JSON. Cuando el tipo de datos de comunicación se establece en JSON, las solicitudes de GET se comunicarán con los puntos finales del modelo de Sling de un componente. Una vez que se produce una actualización en el editor de páginas, la representación JSON del componente actualizado se envía a la biblioteca del modelo de páginas. A continuación, la biblioteca del modelo de página informa al SPA de las actualizaciones.

Flujo de trabajo

Puede comprender el flujo de la interacción entre la SPA y la AEM pensando en el Editor de SPA como un mediador entre ambos.
  • La comunicación entre el editor de páginas y el SPA se realiza mediante JSON en lugar de HTML.
  • El editor de páginas proporciona la versión más reciente del modelo de página a la SPA mediante la API de mensajería y iframe.
  • El administrador de modelos de página notifica al editor que está listo para la edición y pasa el modelo de página como una estructura JSON.
  • El editor no modifica ni siquiera accede a la estructura DOM de la página que se está creando, sino que proporciona el modelo de página más reciente.

Flujo de trabajo básico del editor de SPA

Teniendo en cuenta los elementos clave del Editor de SPA, el autor verá el flujo de trabajo de alto nivel de edición de un SPA dentro de AEM de la siguiente manera.
  1. Se carga el Editor de SPA.
  2. SPA se carga en un marco independiente.
  3. SPA solicita contenido JSON y procesa componentes en el lado del cliente.
  4. El Editor de SPA detecta los componentes procesados y genera superposiciones.
  5. El autor hace clic en una superposición y muestra la barra de herramientas de edición del componente.
  6. El Editor de SPA persiste en las ediciones con una solicitud de POST al servidor.
  7. El Editor de SPA solicita JSON actualizado al Editor de SPA, que se envía a la SPA con un Evento de DOM.
  8. SPA vuelve a procesar el componente correspondiente, actualizando su DOM.
Recuerde:
  • El SPA siempre se encarga de su exposición.
  • El Editor SPA está aislado del SPA mismo.
  • En producción (publicación), el editor de SPA nunca se carga.

Flujo de trabajo de edición de páginas de cliente-servidor

Esta es una descripción más detallada de la interacción cliente-servidor al editar un SPA.
  1. El SPA se inicializa y solicita el modelo de página al exportador del modelo de Sling.
  2. El exportador del modelo de Sling solicita los recursos que componen la página desde el repositorio.
  3. El repositorio devuelve los recursos.
  4. El exportador del modelo de Sling devuelve el modelo de la página.
  5. SPA crea una instancia de sus componentes en función del modelo de página.
  6. 6a El contenido informa al editor de que está listo para la creación.
    6b El editor de páginas solicita las configuraciones de creación de componentes.
    6c El editor de páginas recibe las configuraciones de componentes.
  7. Cuando el autor edita un componente, el editor de páginas publica una solicitud de modificación en el servlet POST predeterminado.
  8. El recurso se actualiza en el repositorio.
  9. El recurso actualizado se proporciona al servlet POST.
  10. El servlet POST predeterminado informa al editor de páginas de que el recurso se ha actualizado.
  11. El editor de páginas solicita el nuevo modelo de página.
  12. Los recursos que componen la página se solicitan del repositorio.
  13. El repositorio proporciona los recursos que componen la página al exportador del modelo de Sling.
  14. El modelo de página actualizado se devuelve al editor.
  15. El editor de páginas actualiza la referencia del modelo de página del SPA.
  16. El SPA actualiza sus componentes en función de la nueva referencia del modelo de página.
  17. Se actualizan las configuraciones de componentes de los editores de página.
    17a El SPA indica al editor de páginas que el contenido está listo.
    17b El editor de páginas proporciona al SPA configuraciones de componentes.
    17c El SPA proporciona configuraciones de componentes actualizadas.

Flujo de trabajo de creación

Esta es una descripción general más detallada que se centra en la experiencia de creación.
  1. El SPA busca el modelo de página.
  2. 2a El modelo de página proporciona al editor los datos necesarios para la creación.
    2b Cuando se notifica, el organizador de componentes actualiza la estructura de contenido de la página.
  3. El orquestador de componentes consulta la asignación entre un tipo de recurso AEM y un componente SPA.
  4. El organizador de componentes crea una instancia dinámica del componente SPA en función del modelo de página y la asignación de componentes.
  5. El editor de páginas actualiza el modelo de página.
  6. 6a El modelo de página proporciona datos de creación actualizados al editor de páginas.
    6b El modelo de página distribuye cambios en el organizador de componentes.
  7. El orquestador de componentes obtiene la asignación de componentes.
  8. El organizador de componentes actualiza el contenido de la página.
  9. Cuando el SPA finaliza de actualizar el contenido de la página, el editor de páginas carga el entorno de creación.

Requisitos y limitaciones

Para permitir que el autor utilice el editor de páginas para editar el contenido de un SPA, la aplicación de SPA debe implementarse para interactuar con el SDK del Editor de SPA de AEM. Consulte el Introducción a los SPA en AEM documento para obtener un mínimo de información que necesite saber para que el suyo funcione.

Marcos admitidos

El SDK del Editor de SPA admite las siguientes versiones mínimas:
  • Reaccione 16.x y posterior
  • Angular 6.x y posterior
Las versiones anteriores de estos marcos pueden funcionar con el SDK del Editor de SPA de AEM, pero no son compatibles.

Marcos adicionales

Se pueden implementar marcos de SPA adicionales para trabajar con el SDK del Editor de SPA de AEM. Consulte el documento de modelo de SPA para conocer los requisitos que debe cumplir una estructura para crear una capa específica de la estructura compuesta de módulos, componentes y servicios para trabajar con el Editor de SPA de AEM.

Uso de varios selectores

Los selectores personalizados adicionales se pueden definir y utilizar como parte de un SPA desarrollado para el SDK de SPA de AEM. Sin embargo, esta compatibilidad requiere que el model selector sea el primer selector y que la extensión sea .json la requerida por el exportador JSON.

Requisitos del Editor de texto

Si desea utilizar el editor in situ de un componente de texto creado en SPA, se requiere una configuración adicional.
  1. Defina un atributo (puede ser cualquiera) en el elemento de envoltorio de contenedor que contiene el texto HTML. En el caso del contenido de muestra de WKND Historial, es un <div> elemento y el selector que se ha utilizado es data-rte-editelement .
  2. Configure la configuración editElementQuery en el componente de texto AEM correspondiente cq:InplaceEditingConfig que apunta a ese selector, por ejemplo: data-rte-editelement . Esto permite al editor saber qué elemento HTML ajusta el texto HTML.
Para ver un ejemplo de cómo se realiza, consulte el contenido de muestra del Historial WKND.
Para obtener información adicional sobre la propiedad editElementQuery y la configuración del editor de texto enriquecido, consulte Configuración del editor de texto enriquecido.

Restricciones

El SDK del Editor de SPA de AEM se introdujo con AEM 6.4 service pack 2. Cuenta con el pleno apoyo del Adobe y, como nueva característica, sigue ampliándose y ampliándose. El Editor de SPA aún no admite las siguientes funciones de AEM:
  • Modo destinatario
  • ContextHub
  • Edición de imágenes en línea
  • Editar configuraciones (p. ej. oyentes)
  • Sistema de estilos
  • Deshacer/Rehacer
  • Diferencia de página y Deformación de tiempo
  • Funciones que realizan la reescritura de HTML en el servidor, como Verificador de vínculos, servicio de reescritura de CDN, acortamiento de URL, etc.
  • Modo de desarrollador
  • AEM lanzamientos