AEM中如何通过HTL嵌入组件并保留被嵌入组件的编辑权限？

问题根源 #

直接用data-sly-resource引用组件时，默认未传递编辑所需的上下文关联信息，导致AEM编辑器无法识别被嵌入组件的可编辑属性，比如缺失cq:editConfig的上下文继承或正确的资源归属关系。

具体实现步骤 #

1. 确认被嵌入组件的编辑配置有效性 #

先检查被嵌入组件的cq:editConfig节点，确保已配置cq:actions、cq:dialogPath等必要编辑属性，保证该组件单独使用时可正常编辑。

2. 正确使用data-sly-resource参数 #

在宿主组件的HTL中，以宿主组件的子资源路径引用被嵌入组件，并指定resourceType，示例代码：

<div data-sly-resource="${'author-embedded' @ resourceType='my-project/components/content/second-author-component'}" class="embedded-wrap"></div>

这里'author-embedded'是宿主组件下的子资源名称，首次渲染时AEM会自动创建该子节点并关联指定的组件类型，确保编辑上下文的关联。

3. 配置宿主组件的嵌套编辑允许规则 #

在宿主组件的cq:editConfig节点下添加cq:childEditConfig（类型为nt:unstructured）：

• 添加属性allowList，值为被嵌入组件的完整resourceType（如my-project/components/content/second-author-component）
• 可选设置order属性，控制该组件在编辑器嵌套列表中的显示顺序

4. 验证编辑功能 #

进入AEM编辑模式，选中宿主组件后，被嵌入的组件会显示专属编辑工具栏（编辑、删除按钮等），点击即可打开其作者对话框进行配置。

额外注意事项 #

• 禁止使用绝对路径引用被嵌入组件，必须基于宿主组件的相对子资源路径，否则无法建立编辑上下文关联
• 若需嵌入多个该组件实例，可通过data-sly-list循环创建不同的子资源节点，每个节点对应一个独立实例
• 确保两个组件的resourceSuperType无冲突，避免编辑配置被意外覆盖

内容的提问来源于stack exchange，提问作者red wine