Incrustar componente
El componente de incrustación de componentes principales permite incrustar contenido externo en una página de contenido de AEM.
CONSEJOUso
El componente incrustado de componente principal permite que el autor de contenido defina el contenido externo seleccionado para que se incruste en una página de contenido de AEM. Además, existe la opción de definir el HTML de forma libre que se va a incrustar.
- Las propiedades del componente se pueden definir en el cuadro de diálogo de configuración.
- Los valores predeterminados del componente se pueden definir en el cuadro de diálogo de diseño al agregarlo a una página.
Versión y compatibilidad
La versión actual del componente incrustado es la versión 2, que se introdujo con la versión 2.18.0 de los componentes principales en febrero de 2022 y se describe en este documento.
La siguiente tabla detalla todas las versiones compatibles del componente, las versiones de AEM con las que son compatibles las versiones del componente y los vínculos a la documentación de versiones anteriores.
| Versión del componente | AEM 6.4 | AEM 6.5 | AEM 6.5 LTS | AEM as a Cloud Service |
|---|---|---|---|---|
| Versión 2 | - | Compatible | Compatible | Compatible |
| Versión 1 | Compatible | Compatible | - | Compatible |
Para obtener más información sobre las versiones y publicaciones de los componentes principales, consulte el documento Versiones de los componentes principales.
Salida del componente de ejemplo
Para experimentar el componente incrustado, ver ejemplos de sus opciones de configuración y la salida HTML y JSON, visite la Biblioteca de componentes.
Detalles técnicos
La documentación técnica más reciente sobre el componente incrustado se encuentra en GitHub.
Puede encontrar más información sobre el desarrollo de componentes principales en la documentación para desarrolladores de componentes principales.
Cuadro de diálogo de configuración
El cuadro de diálogo de configuración permite al autor del contenido definir el recurso externo que se va a incrustar en la página.
Pestaña Propiedades
Primero elija qué tipo de recurso debe incrustar:
Para cada tipo de incrustable, puede definir un ID. Esta opción permite controlar el identificador único del componente en el HTML y en la capa de datos.
- Si se deja en blanco, se generará automáticamente un ID único que se puede encontrar inspeccionando la página resultante.
- Si se especifica un ID, es responsabilidad del autor asegurarse de que sea único.
- Cambiar el ID puede afectar al seguimiento de CSS, JS y de la capa de datos.
URL
La incrustación más sencilla es la URL. Simplemente pegue la dirección URL del recurso que desea incrustar en el campo URL. El componente intentará acceder al recurso y, si uno de los procesadores lo puede representar, se mostrará un mensaje de confirmación debajo del campo URL. Si no es así, el campo se marcará con un error.
El componente incrustado se enviará con procesadores para los siguientes tipos de recursos:
- Recursos que cumplen con el Estándar de oEmbed, incluidos Facebook Post, Instagram, SoundCloud, Twitter y YouTube
Los desarrolladores pueden agregar procesadores de URL adicionales siguiendo la documentación para desarrolladores de componentes incrustados.
Incrustable
Las incrustaciones permiten una mayor personalización del recurso incrustado, que se puede parametrizar e incluir información adicional. Un autor puede elegir entre incrustaciones de confianza preconfiguradas y el componente se enviará con una incrustación de YouTube lista para usar.
El campo Incrustable define el tipo de procesador que desea utilizar. En el caso de YouTube incrustable, puede definir:
- ID de vídeo: el ID exclusivo del vídeo de YouTube del recurso que desea incrustar
- Anchura: la anchura del vídeo incrustado
- Altura: altura del vídeo incrustado
- Habilitar silenciar: este parámetro especifica si el vídeo se reproducirá silenciado de forma predeterminada. Habilitar esto aumenta las posibilidades de que la reproducción automática funcione en exploradores modernos.
- Habilitar la reproducción automática: este parámetro especifica si el vídeo inicial comenzará a reproducirse automáticamente cuando se cargue el reproductor. Esto solo es efectivo en la instancia de publicación o al utilizar la opción Ver como publicado en la instancia de creación.
- Habilitar reproducción en bucle: en el caso de un solo vídeo, este parámetro especifica si el reproductor debe reproducir repetidamente el vídeo inicial. En el caso de una lista de reproducción, el reproductor reproduce la lista de reproducción completa y, a continuación, comienza de nuevo con el primer vídeo.
- Habilitar la reproducción en línea (iOS): este parámetro controla si los vídeos se reproducen en línea (activado) o a pantalla completa (desactivado) en un reproductor HTML5 en iOS.
- Vídeos relacionados sin restricciones: si esta opción está desactivada, los vídeos relacionados provendrán del mismo canal que el vídeo que acaba de reproducirse; de lo contrario, provendrán de cualquier canal.
Otros incrustables ofrecerían campos similares y los puede definir un desarrollador siguiendo la documentación para desarrolladores de componentes incrustados.
NOTAHTML
Puede agregar HTML de forma libre a la página mediante el componente Incrustar.
NOTASeguridad
El marcado HTML que puede introducir el autor se filtra con fines de seguridad para evitar ataques de scripts entre sitios que podrían, por ejemplo, permitir a los autores obtener derechos administrativos.
En general, todos los scripts y elementos style, así como todos los on* y atributos style se eliminarán de la salida.
Sin embargo, las reglas son más complicadas porque el componente Incrustar sigue el conjunto de reglas de filtrado del marco global de saneamiento HTML AntiSamy de AEM, que se puede encontrar en /libs/cq/xssprotection/config.xml. Un desarrollador puede superponer esta configuración para un proyecto específico si fuera necesario.
Puede encontrar información de seguridad adicional en la documentación para desarrolladores para instalaciones en línea de AEM, así como instalaciones de AEM Cloud Service.
NOTA/libs/cq/xssprotection/config.xml, estos cambios afectarán a todo el comportamiento de HTL y JSP y no solo al componente principal incrustado.Pestaña Estilos
El componente Incrustado es compatible con el sistema de estilos de AEM.
Utilice la lista desplegable para seleccionar los estilos que desea aplicar al componente. Las selecciones realizadas en el cuadro de diálogo de edición tienen el mismo efecto que las seleccionadas en la barra de herramientas de componentes.
Los estilos deben configurarse para este componente en el cuadro de diálogo de diseño para que el menú desplegable esté disponible.
