Componente Incorpora embed-component
Il componente core Incorpora consente di incorporare contenuto esterno in una pagina di contenuto AEM.
Utilizzo usage
Il componente core Incorpora consente all’autore di contenuto di definire un contenuto esterno selezionato da incorporare all’interno di una pagina di contenuto AEM. Inoltre, è disponibile un’opzione per definire anche codice HTML in forma libero da incorporare.
- Le proprietà del componente possono essere definite nella finestra di dialogo per configurazione.
- Le impostazioni predefinite del componente, quando lo si aggiunge a una pagina, possono essere definite nella finestra di dialogo per progettazione.
Versione e compatibilità version-and-compatibility
La versione corrente del componente Incorpora è la v2, introdotta con la versione 2.18.0 dei Componenti core a febbraio 2022, ed è quella descritta in questo documento.
La tabella che segue descrive tutte le versioni supportate del componente, le versioni di AEM con cui le versioni del componente sono compatibili e i collegamenti alla documentazione delle versioni precedenti.
Per ulteriori informazioni sulle versioni e sugli aggiornamenti dei Componenti core, vedi il documento Versioni dei Componenti core.
Esempio di output del componente sample-component-output
Per avere un’idea del componente Incorpora e vedere esempi delle opzioni di configurazione e dell’output HTML e JSON, visita la libreria dei componenti.
Dettagli tecnici technical-details
La documentazione tecnica più recente sul componente Incorpora è disponibile su GitHub.
Per ulteriori informazioni sullo sviluppo di Componenti core, vedi la documentazione per gli sviluppatori di Componenti core.
Finestra di dialogo per la configurazione configure-dialog
La finestra di dialogo per configurazione consente all’autore di contenuto di definire la risorsa esterna da incorporare nella pagina.
Scheda Proprietà properties-tab
Scegli innanzitutto il tipo di risorsa da incorporare:
Per ogni tipo di risorsa incorporabile, puoi definire un ID. Questa opzione consente di controllare l’identificatore univoco del componente nel codice HTML e nel Data Layer.
- Se non specificato, viene generato automaticamente un ID univoco reperibile sulla pagina risultante.
- Se l’ID viene specificato, è responsabilità dell’autore accertarsi che sia univoco.
- La modifica dell’ID può avere un impatto sul tracciamento di CSS, JS e Data Layer.
URL url
L’URL è il tipo di risorsa più facile da incorporare. È sufficiente incollare l’URL della risorsa da incorporare nel campo URL. Il componente tenterà di accedere alla risorsa e, se uno dei processori potrà eseguirne il rendering, visualizzerà un messaggio di conferma sotto il campo URL. In caso contrario, il campo verrà contrassegnato come in errore.
Il componente Incorpora viene fornito con i relativi processori per i seguenti tipi di risorse:
- Risorse conformi allo standard oEmbed, inclusi Facebook, Instagram, SoundCloud, Twitter e YouTube
Gli sviluppatori possono aggiungere processori URL aggiuntivi seguendo la documentazione per gli sviluppatori del componente Incorpora.
Contenuto incorporabile embeddable
L’opzione Contenuto incorporabile consente un’ulteriore personalizzazione della risorsa incorporata, che può essere parametrizzata e includere informazioni aggiuntive. Un autore può scegliere tra vari tipi di contenuto affidabile preconfigurato e il componente viene fornito con YouTube incorporabile pronto per l’uso.
Il campo Contenuto incorporabile definisce il tipo di processore vuoi utilizzare. Nel caso di YouTube, puoi quindi definire:
- ID del video: l’ID del video univoco di YouTube della risorsa da incorporare
- Larghezza: larghezza del video incorporato
- Altezza: altezza del video incorporato
- Abilita Disattiva audio: questo parametro specifica se per impostazione predefinita il video verrà riprodotto senza audio. L’abilitazione di questa opzione aumenta le possibilità che la riproduzione automatica funzioni nei browser moderni.
- Abilita Riproduzione automatica: questo parametro specifica se il video iniziale si avvia automaticamente al caricamento del lettore. Questa opzione è valida solo per l’istanza Publish o quando si utilizza l’opzione Visualizza come pubblicato sull’istanza Autore.
- Abilita Ciclo continuo: nel caso di un singolo video, questo parametro specifica se il lettore deve riprodurre ripetutamente il video iniziale. Nel caso di una playlist, il lettore riproduce l’intera playlist e quindi riparte dal primo video.
- Abilita Riproduzione in linea (iOS): questo parametro definisce se i video vengono riprodotti in linea (opzione abilitata) o a schermo intero (opzione disabilitata) in un lettore HTML5 su iOS.
- Video correlati senza restrizioni: se questa opzione è disabilitata, i video correlati proverranno dallo stesso canale del video appena riprodotto, altrimenti proverranno da qualsiasi canale.
Altre risorse incorporabili potrebbero offrire campi simili, che possono essere definiti da uno sviluppatore seguendo la documentazione per gli sviluppatori del componente Incorpora.
HTML html
Puoi aggiungere alla pagina codice HTML in formato libero utilizzando il componente Incorpora.
Sicurezza security
Il markup HTML che l’autore può inserire viene filtrato a scopo di sicurezza per evitare attacchi di script tra i siti, che potrebbero, ad esempio, consentire agli autori di ottenere diritti amministrativi.
In generale, tutti gli script e gli elementi style nonché tutti gli attributi on* e style verranno rimossi dall’output.
Tuttavia, le regole sono più complicate, perché il componente Incorpora segue a livello globale il set di regole di filtro del framework di bonifica AntiSamy HTML di AEM, reperibile in /libs/cq/xssprotection/config.xml. Se necessario, uno sviluppatore può sostituire temporaneamente questa impostazione per la configurazione specifica di un progetto.
Ulteriori informazioni sulla sicurezza sono disponibili nella documentazione sulle installazioni on-premise per gli sviluppatori di AEM e in Installazioni di AEM as a Cloud Service.
/libs/cq/xssprotection/config.xml, queste modifiche influiscono sul comportamento di tutti gli elementi HTL e JSP e non solo su quello del componente core Incorpora.Scheda Stili styles-tab-edit
Il componente Incorpora supporta il sistema di stili di AEM.
Utilizza il menu a discesa per selezionare gli stili da applicare al componente. Le selezioni effettuate nella finestra di dialogo di modifica hanno lo stesso effetto di quelle selezionate nella barra degli strumenti del componente.
Gli stili devono essere configurati per questo componente nella finestra di dialogo di progettazione affinché il menu a discesa sia disponibile.
Finestra di dialogo per progettazione design-dialog
La finestra di dialogo per progettazione consente all’autore del modello di definire le opzioni disponibili per l’autore di contenuto che utilizza il componente Incorpora e le impostazioni predefinite scelte al momento dell’inserimento di questo componente.
Scheda Tipi incorporabili embeddable-types-tab
- Disabilita URL: se selezionata, disabilita l’opzione URL per l’autore di contenuto
- Disabilita contenuti incorporabili: se selezionata, disabilita l’opzione Contenuto incorporabile per l’autore di contenuto, indipendentemente dai processori incorporabili consentiti.
- Disabilita HTML: se selezionata, disabilita l’opzione HTML per l’autore del contenuto.
- Contenuti incorporabili consentiti: opzione a selezione multipla che definisce quali processori incorporabili sono disponibili per l’autore di contenuto, a condizione che sia abilitata l’opzione Contenuto incorporabile.
Scheda YouTube youtube-tab
- Consenti la configurazione del comportamento Disattiva audio: consente all’autore del contenuto di configurare l’opzione Abilita Disattiva audio nel componente quando il tipo incorporabile selezionato è YouTube
- Valore predefinito per Disattiva audio: imposta automaticamente l’opzione Abilita Disattiva audio quando il tipo incorporabile selezionato è YouTube
- Consenti la configurazione del comportamento Riproduzione automatica: consente all’autore di contenuto di configurare l’opzione Abilita riproduzione automatica nel componente quando il tipo incorporabile selezionato è YouTube
- Valore predefinito per Riproduzione automatica: se selezionata, imposta automaticamente l’opzione Abilita Riproduzione automatica quando il tipo incorporabile selezionato è YouTube
- Consenti la configurazione del comportamento Ciclo continuo: consente all’autore di contenuto di configurare l’opzione Abilita ciclo continuo nel componente quando il tipo incorporabile selezionato è YouTube
- Valore predefinito per Ciclo continuo: imposta automaticamente l’opzione Abilita ciclo continuo quando il tipo incorporabile selezionato è YouTube
- Consenti la configurazione di Riproduzione in linea (iOS): consente all’autore di contenuto di configurare l’opzione Abilita riproduzione in linea (iOS) nel componente quando il tipo incorporabile selezionato è YouTube
- Valore predefinito per Riproduzione in linea (iOS): imposta automaticamente l’opzione Abilita riproduzione in linea (iOS) quando il tipo incorporabile selezionato è YouTube
- Consenti la configurazione di Video correlati: consente all’autore di contenuto di configurare l’opzione Video correlati senza restrizioni nel componente quando il tipo incorporabile selezionato è YouTube
- Valore predefinito per Video correlati senza restrizioni: imposta automaticamente l’opzione Video correlati senza restrizioni quando il tipo incorporabile selezionato è YouTube