Einbettungskomponente embed-component
Die Einbettungskomponente der Kernkomponenten ermöglicht das Einbetten externer Inhalte in eine AEM-Inhaltsseite.
Nutzung usage
Mit der Einbettungskomponente der Kernkomponenten kann der Inhaltsautor ausgewählte externe Inhalte definieren, die in eine AEM-Inhaltsseite eingebettet werden sollen. Darüber hinaus gibt es die Möglichkeit, einzubettende Freiform-HTML zu definieren.
- Die Eigenschaften der Komponente können im Dialogfeld „Konfigurieren“ definiert werden.
- Die Standardeinstellungen für die Komponente beim Hinzufügen zu einer Seite können im Dialogfeld „Design“ definiert werden.
Version und Kompatibilität version-and-compatibility
Die aktuelle Version der Einbettungskomponente ist v2, die mit Version 2.18.0 der Kernkomponenten im Februar 2022 eingeführt wurde und in diesem Dokument beschrieben wird.
Die folgende Tabelle enthält alle unterstützten Versionen der Komponente, die AEM-Versionen, mit denen die Versionen der Komponente kompatibel sind, sowie Links zur Dokumentation für frühere Versionen.
Weitere Informationen zu Kernkomponentenversionen und -freigaben finden Sie im Dokument Kernkomponentenversionen.
Musterkomponentenausgabe sample-component-output
Um die Einbettungskomponente auszuprobieren sowie Beispiele für ihre Konfigurationsoptionen sowie HTML- und JSON-Ausgaben zu erhalten, besuchen Sie die Komponentenbibliothek.
Technische Details technical-details
Die aktuelle technische Dokumentation zur Einbettungskomponente finden Sie auf GitHub.
Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.
Dialogfeld „Konfigurieren“ configure-dialog
Im Dialogfeld „Konfigurieren“ kann der Inhaltsautor die externe Ressource definieren, die auf der Seite eingebettet werden soll.
Registerkarte „Eigenschaften“ properties-tab
Wählen Sie zunächst, welcher Ressourcentyp eingebettet werden soll:
Für jeden Typ von einbettbarem Element können Sie eine ID festlegen. Diese Option dient zur Kontrolle der eindeutigen Kennung der Komponente in der HTML-Datei und auf der Datenschicht.
- Wenn Sie das Feld leer lassen, wird automatisch eine eindeutige ID generiert, die Sie über die resultierende Seite finden.
- Sofern eine ID angegeben wird, ist vom Autor bzw. der Autorin sicherzustellen, dass diese eindeutig ist.
- Änderungen der ID können sich auf das CSS-, JS- und Datenschicht-Tracking auswirken.
URL url
Die einfachste Form von Einbettung ist die URL. Fügen Sie im Feld URL einfach die URL der Ressource ein, die Sie einbetten möchten. Die Komponente wird versuchen, auf die Ressource zuzugreifen. Wenn sie von einem der Prozessoren wiedergegeben werden kann, wird eine Bestätigungsmeldung unter dem Feld URL angezeigt. Andernfalls wird das Feld mit einem Fehler markiert.
Die Einbettungskomponente wird mit Prozessoren für die folgenden Arten von Ressourcen bereitgestellt:
- Ressourcen, die dem oEmbed-Standard entsprechen, einschließlich Facebook Post, Instagram, SoundCloud, Twitter und YouTube
Entwickler können zusätzliche URL-Prozessoren hinzufügen, indem sie der Entwicklerdokumentation der Einbettungskomponente folgen.
Einbettbare Prozessoren embeddable
Einbettbare Prozessoren ermöglichen eine bessere Anpassung der eingebetteten Ressource, die parametrisiert werden und zusätzliche Informationen enthalten kann. Ein Autor kann aus vorkonfigurierten vertrauenswürdigen einbettbaren Prozessoren auswählen und die Komponente wird standardmäßig mit einem einbettbaren YouTube-Prozessor ausgeliefert.
Im Feld Einbettbare Prozessoren wird der zu verwendende Prozessortyp definiert. Im Falle des einbettbaren YouTube-Prozessors können Sie dann Folgendes definieren:
- Video-ID - Die eindeutige Video-ID der YouTube-Ressource, die Sie einbetten möchten
- Breite - Die Breite des eingebetteten Videos
- Höhe - Die Höhe des eingebetteten Videos
- Stummschalten aktivieren - Dieser Parameter gibt an, ob das Video standardmäßig stummgeschaltet abgespielt werden soll. Durch Aktivierung dieser Funktion erhöht sich die Wahrscheinlichkeit, dass die automatische Wiedergabe in modernen Browsern funktioniert.
- Automatische Wiedergabe aktivieren - Dieser Parameter gibt an, ob das erste Video beim Laden des Players automatisch wiedergegeben wird. Dies ist nur in der Veröffentlichungsinstanz oder bei Verwendung der Option Als veröffentlicht anzeigen in der Autoreninstanz wirksam.
- Schleife aktivieren - Bei einem einzelnen Video gibt dieser Parameter an, ob der Player das erste Video wiederholt abspielen soll. Bei einer Wiedergabeliste spielt der Player die gesamte Wiedergabeliste ab und beginnt dann wieder beim ersten Video.
- Inline-Wiedergabe (iOS) aktivieren - Mit diesem Parameter wird gesteuert, ob Videos in einem HTML5-Player unter iOS inline (ein) oder im Vollbildmodus (aus) wiedergegeben werden.
- Unbeschränkte zugehörige Videos - Wenn diese Option deaktiviert ist, kommen verwandte Videos aus demselben Kanal wie das gerade abgespielte Video, andernfalls kommen sie aus einem beliebigen Kanal.
Andere einbettbare Prozessoren weisen ähnliche Felder auf und können von einem Entwickler unter Beachtung der Entwicklerdokumentation der Einbettungskomponente definiert werden.
HTML html
Mit der Einbettungskomponente können Sie Ihrer Seite Freiform-HTML hinzufügen.
Sicherheit security
Das HTML-Markup, das der Autor eingeben kann, wird aus Sicherheitsgründen gefiltert, um Site-übergreifende Skriptangriffe zu verhindern, die es Autoren z. B. erlauben würden, sich Administratorrechte zu verschaffen.
Im Allgemeinen werden alle Skript- und style-Elemente sowie alle on*- und style-Attribute aus der Ausgabe entfernt.
Die Regeln sind jedoch komplizierter, da die Einbettungskomponente dem Filterregelsatz des globalen HTML-AntiSamy-Bereinigungs-Frameworks von AEM folgt, der unter /libs/cq/xssprotection/config.xml zu finden ist. Dies kann bei Bedarf von einem Entwickler für eine projektspezifische Konfiguration überlagert werden.
Weitere Sicherheitsinformationen finden Sie in der AEM-Entwicklerdokumentation für lokale Installationen sowie in AEM as a Cloud Service-Installationen.
/libs/cq/xssprotection/config.xml konfiguriert werden können, wirken sich diese Änderungen nicht nur auf die Einbettungs-Kernkomponente, sondern auf das gesamte HTL- und JSP-Verhalten aus.Registerkarte „Arten“ styles-tab-edit
Die Einbettungskomponente unterstützt das AEM-Stilsystem.
Verwenden Sie das Dropdown-Menü, um die Stile auszuwählen, die Sie auf die Komponente anwenden möchten. Die im Dialogfeld „Bearbeiten“ vorgenommenen Auswahlen haben denselben Effekt wie die in der Komponenten-Symbolleiste ausgewählten.
Stile müssen für diese Komponente im Dialogfeld „Design“ konfiguriert werden, damit das Dropdown-Menü verfügbar ist.
Dialogfeld „Design“ design-dialog
Der Dialogfeld „Design“ ermöglicht es dem Vorlagenautor, die Optionen, die für den Inhaltsautor bei Verwendung der Einbettungskomponente verfügbar sind, sowie die Standardeinstellungen bei Platzierung der Einbettungskomponente zu definieren.
Registerkarte „Typen einbettbarer Prozessoren“ embeddable-types-tab
- URL deaktivieren - Deaktiviert bei Auswahl die Option URL für den Inhaltsautor.
- Einbettbare Elemente deaktivieren - Deaktiviert bei Auswahl die Option Einbettbare Prozessoren für den Inhaltsautor, unabhängig davon, welche einbettbaren Prozessoren zulässig sind.
- HTML deaktivieren - Deaktiviert bei Auswahl die HTML-Option für den Inhaltsautor.
- Zulässige einbettbare Elemente - Mehrfachauswahl, die definiert, welche einbettbaren Prozessoren für den Inhaltsautor verfügbar sind, sofern die Option Einbettbare Prozessoren aktiviert ist.
Registerkarte „YouTube“ youtube-tab
- Konfiguration des Stummschaltungsverhaltens zulassen - Erlaubt es dem Autor von Inhalten, die Option Stummschalten aktivieren in der Komponente zu konfigurieren, wenn der YouTube-Einbettungstyp ausgewählt ist.
- Standardwert für die Stummschaltung - Legt bei Auswahl des YouTube-Einbettungstyps automatisch die Option Stummschalten aktivieren fest.
- Konfiguration des automatischen Wiedergabeverhaltens zulassen - Erlaubt es dem Autor von Inhalten, die Option Automatische Wiedergabe aktivieren in der Komponente zu konfigurieren, wenn der YouTube-Einbettungstyp ausgewählt ist.
- Standardwert für die automatische Wiedergabe - Legt bei Auswahl des YouTube-Einbettungstyps automatisch die Option Automatische Wiedergabe aktivieren fest.
- Konfiguration des Schleifenverhaltens zulassen - Erlaubt es dem Autor von Inhalten, die Option Schleife aktivieren in der Komponente zu konfigurieren, wenn der YouTube-Einbettungstyp ausgewählt ist.
- Standardwert für Schleifen - Legt bei Auswahl des YouTube-Einbettungstyps automatisch die Option Schleife aktivieren fest.
- Konfiguration der Inline-Wiedergabe (iOS) zulassen - Erlaubt es dem Autor von Inhalten, die Option Inline-Wiedergabe (iOS) aktivieren in der Komponente zu konfigurieren, wenn der YouTube-Einbettungstyp ausgewählt ist.
- Standardwert für die Inline-Wiedergabe (iOS) - Legt bei Auswahl des YouTube-Einbettungstyps automatisch die Option Inline-Wiedergabe (iOS) aktivieren fest.
- Konfiguration zugehöriger Videos zulassen - Erlaubt es dem Autor von Inhalten, die Option Unbeschränkte zugehörige Videos in der Komponente zu konfigurieren, wenn der YouTube-Einbettungstyp ausgewählt ist.
- Standardwert für unbeschränkte zugehörige Videos - Legt bei Auswahl des YouTube-Einbettungstyps automatisch die Option Unbeschränkte zugehörige Videos fest.