Component insluiten (v1) embed-component

Met de component Core Components Embed kunt u externe inhoud insluiten in een AEM inhoudspagina.

Gebruik usage

Met de component Core Component Embed kan de auteur van de inhoud geselecteerde externe inhoud definiëren die moet worden ingesloten in een AEM inhoudspagina. Bovendien is er een optie om ook vrije-vorm HTML te bepalen die moet worden ingebed.

Versie en compatibiliteit version-and-compatibility

In dit document wordt versie 1 van de Embed-component beschreven. Deze is in september 2019 geïntroduceerd met versie 2.7.0 van de Core Components.

CAUTION
In dit document wordt versie 1 van de component Embed beschreven.
Voor details van de huidige versie van de Embed Component, zie Componentdocument inbedden.

Uitvoer van voorbeeldcomponent sample-component-output

Om de Embed Component te ervaren evenals voorbeelden van zijn configuratieopties evenals HTML en output te zien JSON, bezoek de Bibliotheek van de Component.

Technische details technical-details

De recentste technische documentatie over Embed Component kan op GitHubworden gevonden.

De verdere details over het ontwikkelen van de Componenten van de Kern kunnen in de de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

Dialoogvenster configureren configure-dialog

In het dialoogvenster voor configureren kan de auteur van de inhoud de externe bron definiëren die op de pagina moet worden ingesloten. Kies eerst welk type bron moet worden ingesloten:

Voor elk type van inbedbaar, kunt u identiteitskaart van de a.u. ​bepalen. Deze optie staat toe om het unieke herkenningsteken van de component in de HTML en in de Laag van Gegevenste controleren.

  • Als deze leeg blijft, wordt automatisch een unieke id voor u gegenereerd. U kunt deze vinden door de resulterende pagina te inspecteren.
  • Als een id is opgegeven, is het de verantwoordelijkheid van de auteur om ervoor te zorgen dat deze uniek is.
  • Het wijzigen van de id kan gevolgen hebben voor het bijhouden van CSS-, JS- en gegevenslagen.

URL url

De eenvoudigste insluiting is de URL. Plak eenvoudig URL van het middel u wenst om in het URL gebied in te bedden. De component zal proberen om tot het middel toegang te hebben en als het door één van de bewerkers kan worden teruggegeven, zal het een bevestigingsbericht onder het URL gebied tonen. Als dat niet het geval is, wordt het veld als een fout gemarkeerd.

De component Embed wordt geleverd bij processors voor de volgende typen bronnen:

  • Middelen die aan de norm inbeddenmet inbegrip van Facebook Post, Instagram, SoundCloud, Twitter, en YouTube voldoen
  • Pinterest

De ontwikkelaars kunnen extra bewerkers URL door na de ontwikkelaarsdocumentatie van de Embed Component toevoegen.

bedt Component geeft dialoog voor URL uit

Insluitbaar embeddable

Met insluitbare bestanden kunt u de ingesloten bron verder aanpassen. U kunt hier parameters aan toewijzen en aanvullende informatie opnemen. Een auteur kan een keuze maken uit vooraf geconfigureerde vertrouwde insluitbare bestanden en de component wordt geleverd met een YouTube-insluitbare out-of-the-box.

Het Inbeddable gebied bepaalt het type van bewerker u wilt gebruiken. In het geval van de insluitbare YouTube kunt u het volgende definiëren:

  • Video identiteitskaart - unieke videoidentiteitskaart van YouTube van het middel u wilt inbedden
  • Breedte - de breedte van de ingebedde video
  • Hoogte - de hoogte van de ingebedde video
  • laat Dempen toe - Deze parameter specificeert of de video gedempt door gebrek zal spelen. Als u deze optie inschakelt, wordt de kans dat Automatisch afspelen werkt in moderne browsers groter.
  • laat Autoplay toe - Deze parameter specificeert of de aanvankelijke video automatisch zal beginnen te spelen wanneer de speler laadt. Dit is slechts efficiënt op publiceer instantie of wanneer het gebruiken van de Mening zoals Gepubliceerde optie op de auteursinstantie.
  • laat Lijn toe - in het geval van één enkele video, specificeert deze parameter of de speler de aanvankelijke video herhaaldelijk zou moeten spelen. In het geval van een afspeellijst speelt de speler de volledige afspeellijst af en begint vervolgens opnieuw bij de eerste video.
  • laat Inline Playback (iOS) toe - Deze parameter controleert of video's inline (op) of volledig scherm (weg) in een speler van HTML5 op iOS spelen.
  • Onbeperkte Verwante Verwante Video's - als deze optie gehandicapt is, zullen de verwante video's uit het zelfde kanaal komen zoals de video die enkel werd gespeeld, anders zullen zij uit om het even welk kanaal komen.

Merk op dat "toelaten"opties door de Dialoog van het Ontwerpmoeten worden geactiveerd en als standaardwaarden kunnen worden geplaatst.

Andere inbeddables zouden gelijkaardige gebieden aanbieden en kunnen door een ontwikkelaar door na de ontwikkelaarsdocumentatie van de Embed Component worden bepaald.

bedt de Edit dialoog van de Component voor ingebedde Lijsten

NOTE
Embeddables moet op het malplaatjeniveau via de Dialoog van het Ontwerpworden toegelaten om aan de paginaauteur beschikbaar te zijn.

HTML html

Met de component Embed kunt u HTML in een vrije vorm aan de pagina toevoegen.

bedt Component geeft dialoog voor HTML uit

NOTE
Eventuele onveilige tags, zoals scripts, worden gefilterd vanaf de ingevoerde HTML en niet weergegeven op de resulterende pagina.

Beveiliging security

De HTML-opmaak die de auteur kan invoeren, wordt voor beveiligingsdoeleinden gefilterd om scriptaanvallen op andere sites te voorkomen, zodat auteurs bijvoorbeeld beheerdersrechten kunnen verkrijgen.

In het algemeen, zullen alle manuscript en style elementen evenals alle on* en style attributen uit de output worden verwijderd.

De regels zijn echter gecompliceerder omdat de component Embed volgt AEM de algemene filterregelset van het HTML AntiSamy-sanitatieframework, die u kunt vinden op /libs/cq/xssprotection/config.xml . Dit kan voor project-specifieke configuratie door een ontwikkelaar indien vereist worden bedekt.

De extra veiligheidsinformatie kan in de AEM ontwikkelaarsdocumentatie voor op-gebouw installatiesevenals installaties van AEM as a Cloud Service worden gevonden.

NOTE
Hoewel de regels van het AntiSamy sanitation framework kunnen worden geconfigureerd door /libs/cq/xssprotection/config.xml te bedekken, zijn deze wijzigingen van invloed op al het HTML- en JSP-gedrag en niet alleen op de Embed Core Component.

Ontwerpdialoogvenster design-dialog

In het ontwerpdialoogvenster kan de sjabloonauteur de opties definiëren die beschikbaar zijn voor de inhoudauteur die de component Embed gebruikt en de standaardinstellingen die zijn ingesteld bij het plaatsen van de component Embed.

Tabblad Insluitbare typen embeddable-types-tab

bed de het ontwerpdialoog van de Component in

  • maak URL onbruikbaar - maakt de URL optie voor de inhoudauteur onbruikbaar wanneer geselecteerd
  • maak Inbeddables onbruikbaar - maakt de Inbeddable optie voor de inhoudauteur wanneer geselecteerd onbruikbaar, ongeacht welke ingebedde bewerkers worden toegestaan.
  • maak HTML onbruikbaar - maakt de HTML optie voor de inhoudauteur onbruikbaar wanneer geselecteerd.
  • Toegestane Embeddables - Multiselect die bepaalt welke beddable bewerkers aan de inhoudauteur beschikbaar zijn, op voorwaarde dat de Inbeddable optie actief is.

YouTube Tab youtube-tab

YouTube lusje van de Embed het ontwerpdialoog van de Component

  • staat configuratie van stomme gedrag toe - staat inhoudauteur toe om te vormen toelaten Dempen optie in de component wanneer YouTube inbedt type wordt geselecteerd
    • Standaardwaarde van dempen - plaatst automatisch Dempen optie toelaten wanneer YouTube inbedt type wordt geselecteerd
  • staat configuratie van autoplay gedrag toe - staat inhoudauteur toe om te vormen laat optie Autoplay in de component toe wanneer YouTube inbedt type wordt geselecteerd
    • Standaardwaarde van autoplay - plaatst automatisch Autoplay optie toelaat wanneer YouTube inbedt type wordt geselecteerd
  • staat configuratie van lusgedrag toe - staat inhoudauteur toe om te vormen toelaten Lijn optie in de component wanneer YouTube inbedt type wordt geselecteerd
    • Standaardwaarde van lijn - plaatst automatisch Loop optie toelaten wanneer YouTube inbedt type wordt geselecteerd
  • staat configuratie van gealigneerde playback (iOS) toe - staat inhoudauteur toe om te vormen laat Gealigneerde Playback (iOS) optie in de component toe wanneer YouTube inbedt type wordt geselecteerd
    • Standaardwaarde van gealigneerde playback (iOS) - plaatst automatisch laat Gealigneerde Playback (iOS) toe optie wanneer YouTube inbed type wordt geselecteerd
  • staat configuratie van gealigneerde video's toe - staat inhoudsauteur toe om de Onbeperkte Verwante Verwante Video's optie in de component te vormen wanneer YouTube inbedt type wordt geselecteerd
    • Standaardwaarde van onbeperkte verwante video's - plaatst automatisch Onbeperkte Verwante Verwante Video's optie wanneer YouTube inbedt type wordt geselecteerd
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c