嵌入组件 embed-component
利用核心组件嵌入组件,可以在 AEM 内容页面中嵌入外部内容。
用途 usage
利用核心组件嵌入组件,内容作者可以将所选外部内容定义为嵌入到 AEM 内容页面中。此外,还有一个选择,即定义嵌入的自由格式的 HTML。
版本和兼容性 version-and-compatibility
嵌入组件的当前版本是 v2,此版本随 2022 年 2 月的核心组件发行版 2.18.0 的发布引入,具体说明见本文。
下表详细说明了该组件的所有受支持版本、与该组件的版本兼容的 AEM 版本以及指向早期版本文档的链接。
有关核心组件版本的更多信息,请参阅文档核心组件版本。
示例组件输出 sample-component-output
要体验嵌入组件并查看其配置选项示例以及 HTML 和 JSON 输出,请访问组件库。
技术详细信息 technical-details
在 GitHub 上可找到有关嵌入组件的最新技术文档。
在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。
“配置”对话框 configure-dialog
利用“配置”对话框,内容作者可以定义要在页面上嵌入的外部资源。
“属性”选项卡 properties-tab
首先选择要嵌入什么类型的资源:
对于每种可嵌入的类型,您可以定义 ID。利用此选项,可以控制 HTML 和 Data Layer 中的组件的唯一标识符。
- 如果留空,系统会自动为您生成一个唯一 ID,可以通过检查结果页面找到该 ID。
- 如果指定一个 ID,作者有责任确保它是唯一的。
- 更改此 ID 会对 CSS、JS 和 Data Layer 跟踪产生影响。
URL url
最简单的嵌入是 URL。只需将待嵌入资源的 URL 粘贴到 URL 字段中。组件将尝试访问资源,如果它可以由处理程序之一渲染,则会在 URL 字段下显示确认消息。如果不能,该字段将标记为出错。
嵌入组件附带了用于以下资源类型的处理程序:
- 符合 oEmbed 标准的资源,包括 Facebook Post、Instagram、SoundCloud、Twitter 和 YouTube
开发人员可以按照嵌入组件的开发人员文档,添加额外的 URL 处理程序。
可嵌入内容 embeddable
可嵌入内容允许对嵌入的资源进行更多的自定义,这些自定义可以参数化并包括额外信息。作者能够从 YouTube 提供的现成可嵌入内容中,选择预配置的可信可嵌入内容。
可嵌入内容 字段定义所要使用的处理程序的类型。在使用 YouTube 可嵌入内容时,您可以定义:
- 视频 ID - YouTube 中待嵌入资源的唯一视频 ID
- 宽度 - 所嵌入视频的宽度
- 高度 - 所嵌入视频的高度
- 启用静音 - 此参数指定默认情况下播放的视频是否静音。启用此项会增加自动播放在现代浏览器中工作的可能性。
- 启用自动播放 - 此参数指定在加载了播放器时,是否自动开始播放初始视频。这仅在发布实例上或者在创作实例上使用 以发布的形式查看 选项时有效。
- 启用自动循环 - 在单个视频的情况下,此参数指定播放器是否应重复播放初始视频。在有播放列表的情况下,播放器播放整个播放列表,然后从第一个视频从头开始。
- 启用内联播放 (iOS) - 此参数控制在 iOS 上的 HTML5 播放器中,是内联播放(打开)还是全屏播放(关闭)。
- 不受限相关视频 - 如果禁用此选项,则相关视频将来自与刚播放的视频相同的频道,否则来自任何频道。
其他可嵌入内容将提供类似的字段,并可由开发人员按照嵌入组件的开发人员文档定义。
HTML html
您可以使用嵌入组件将自由格式的 HTML 添加到页面。
安全性 security
出于安全目的,作者可以输入的 HTML 标记将筛选掉,以避免跨站点脚本攻击,例如,此类攻击可允许作者获取管理权限。
一般来说,所有脚本和 style
元素以及 on*
和 style
属性都将从输出中删除。
但是,规则更复杂,因为嵌入组件遵循 AEM 的全局 HTML AntiSamy 净化框架筛选规则集,此规则集可在 /libs/cq/xssprotection/config.xml
中找到。如果需要,这可以由开发人员覆盖以提供项目特定的配置。
其他安全信息可在适用于内部部署安装的 AEM 开发人员文档以及 AEM as a Cloud Service 安装中找到。
/libs/cq/xssprotection/config.xml
来配置,但这些更改会影响到所有 HTL 和 JSP 行为,而不只是嵌入核心组件。“样式”选项卡 styles-tab-edit
嵌入组件支持 AEM 样式系统。
使用下拉菜单选择要应用于该组件的样式。在“编辑”对话框中所做的选择与从组件工具栏中选择的操作效果相同。
必须在“设计”对话框中为此组件配置样式,以便下拉菜单可用。
“设计”对话框 design-dialog
使用“设计”对话框,模板作者可以定义哪些选项可供使用嵌入组件的内容作者使用,以及在放置嵌入组件时的默认设置。
“可嵌入内容类型”选项卡 embeddable-types-tab
- 禁用 URL - 在选中时,对内容作者禁用 URL 选项
- 禁用可嵌入内容 - 在选中时,对内容作者禁用 可嵌入内容 选项,而无论允许了什么可嵌入内容处理程序。
- 禁用 HTML - 在选中时,对内容作者禁用 HTML 选项。
- 允许可嵌入内容 - 多项选择,定义哪些可嵌入内容处理程序可供内容作者使用,前提是激活了 可嵌入内容 选项。
“YouTube”选项卡 youtube-tab
- 允许静音行为配置 - 允许内容作者在选择了 YouTube 嵌入类型时,在组件中配置 启用静音 选项
- 默认静音值 - 在选择了 YouTube 嵌入类型时,自动设置 启用静音 选项
- 允许自动播放行为配置 - 允许内容作者在选择了 YouTube 嵌入类型时,在组件中配置 启用自动播放 选项
- 默认自动播放值 - 在选择了 YouTube 嵌入类型时,自动设置 启用自动播放 选项
- 允许循环行为配置 - 允许内容作者在选择了 YouTube 嵌入类型时,在组件中配置 启用循环 选项
- 默认循环值 - 在选择了 YouTube 嵌入类型时,自动设置 启用循环 选项
- 允许内联播放 (iOS) 配置 - 允许内容作者在选择了 YouTube 嵌入类型时,在组件中配置 启用内联播放 (iOS) 选项
- 默认内联播放 (iOS) 值 - 在选择了 YouTube 嵌入类型时,自动设置 启用内联播放 (iOS) 选项
- 允许内联视频配置 - 允许内容作者在选择了 YouTube 嵌入类型时,在组件中配置 不受限相关视频 选项
- 默认不受限相关视频值 - 在选择了 YouTube 嵌入类型时,自动设置 不受限相关视频 选项