单页应用程序 (SPA) 可以为网站用户提供引人入胜的良好体验。开发人员希望能够使用SPA框架构建站点,而作者希望无缝编辑AEM中的内容,以便使用此类框架构建站点。
SPA Editor优惠了在AEM内支持SPA的全面解决方案。 本页概述SPA支持在AEM中的结构化、SPA编辑器的工作方式以及SPA框架和AEM保持同步的方式。
单页应用程序(SPA)编辑器功能需要AEM 6.4 service pack 2或更高版本。
SPA编辑器是需要SPA框架的客户端渲染(例如,React或Angular)的项目的推荐解决方案。
使用通用SPA框架(如React和Angular)构建的站点通过动态JSON加载其内容,并且不提供AEM页面编辑器必须的HTML结构才能放置编辑控件。
要在AEM中启用SPA的编辑,需要SPA的JSON输出与AEM存储库中的内容模型之间的映射才能保存对内容所做的更改。
SPA中的AEM支持引入了精简JS层,当在页面编辑器中加载时,该层会与SPA JS代码交互,通过该层可以发送事件,并激活编辑控件的位置以允许上下文编辑。 此功能基于Content Services API端点概念,因为SPA中的内容需要通过Content Services加载。
有关AEM中SPA的更多详细信息,请参阅以下文档:
SPA的页面组件不通过JSP或HTL文件提供其子组件的HTML元素。 此操作委托给SPA框架。 子组件或模型的表示形式从JCR中作为JSON数据结构获取。 然后,SPA组件会根据该结构添加到页面。 此行为将页面组件的初始主体组合与非SPA组件的相对应部分区分开。
页面模型的解析和管理委托给提供的PageModel
库。 SPA必须使用页面模型库才能进行初始化,并由SPA编辑器进行创作。 页面模型库通过aem-react-editable-components
npm间接提供给AEM页面组件。 页面模型是AEM和SPA之间的解释器,因此始终必须存在。 创作页面时,必须添加一个额外的库cq.authoring.pagemodel.messaging
,以启用与页面编辑器的通信。
如果SPA页面组件从页面核心组件继承内容,则有两个选项可以使cq.authoring.pagemodel.messaging
客户端库类别可用:
customfooterlibs.html
添加类别。对于导出模型中的每个资源,SPA将映射一个实际组件,以执行
呈现。 该模型表示为JSON,然后使用容器中的组件映射进行呈现。
cq.authoring.pagemodel.messaging
类别的包含应限于SPA编辑器的上下文。
将cq.authoring.pagemodel.messaging
类别添加到页面时,它将向页面编辑器发送一条消息,以建立JSON通信数据类型。 当通信数据类型设置为JSON时,GET请求将与组件的Sling Model端点进行通信。 在页面编辑器中进行更新后,已更新组件的JSON表示形式将发送到页面模型库。 页面模型库随后会通知SPA更新。
您可以理解SPA和AEM之间的交互流程,将SPA编辑看作是和之间的调解人。
请注意SPA Editor的关键元素,在AEM内编辑SPA的高级工作流程对作者如下所示。
SPA Editor加载。
SPA加载到单独的帧中。
SPA在客户端请求JSON内容并呈现组件。
SPA Editor检测渲染的组件并生成叠加。
创作单击叠加,显示组件的编辑工具栏。
SPA Editor会持续进行编辑,并向服务器发出POST请求。
SPA Editor向SPA Editor请求更新的JSON,该编辑器将使用DOM事件发送到SPA。
SPA重新渲染相关组件,更新其DOM。
记住:
这是编辑SPA时客户端与服务器交互的更详细概述。
SPA将自行初始化,并从Sling Model Exporter请求页面模型。
Sling Model Exporter从存储库请求组成页面的资源。
存储库返回资源。
Sling Model Exporter返回页面的模型。
SPA根据页面模型实例化其组件。
6 a内容会通知编辑者已准备好进行创作。
6b 页面编辑器请求组件创作配置。
6 页面编辑器接收组件配置。
当作者编辑组件时,页面编辑器会将修改请求发布到默认POSTservlet。
资源会在存储库中更新。
更新的资源被提供给POSTservlet。
默认POSTservlet通知页面编辑器资源已更新。
页面编辑器请求新的页面模型。
从存储库请求构成页面的资源。
组成页面的资源由存储库提供给Sling Model Exporter。
更新的页面模型将返回到编辑器。
页面编辑器更新SPA的页面模型参考。
SPA会根据新的页面模型参考更新其组件。
页面编辑器的组件配置将更新。
17 aSPA向页面编辑器发出指示,内容已准备就绪。
17 b页面编辑器为SPA提供组件配置。
17 SPA提供更新的组件配置。
这是更详细的概述,重点介绍创作体验。
SPA获取页面模型。
2 a页面模型为编辑者提供创作所需的数据。
2b 当收到通知时,component orchestrator会更新页面的内容结构。
组件查询器将映射到AEM资源类型和SPA组件。
component orchestrator根据页面模型和组件映射动态实例化SPA组件。
页面编辑器会更新页面模型。
6a 页面模型为页面编辑器提供更新的创作数据。
6b 页面模型将更改调度到component orchestrator。
组件Orchestrator获取组件映射。
component orchestrator更新页面内容。
当SPA完成更新页面内容时,页面编辑器将加载创作环境。
要使作者能够使用页面编辑器编辑SPA的内容,必须实现SPA应用程序以与SPA AEM编辑器SDK进行交互。 请参阅AEM中的SPA快速入门文档,了解使您的产品运行所需的最低要求。
SPA Editor SDK支持以下最低版本:
这些框架的先前版本可能与AEM SPA Editor SDK一起使用,但不支持。
可实施其他SPA框架以与AEM SPA Editor SDK配合使用。 请参见SPA Blueprint文档,了解框架为创建框架特定层以与SPA AEM Editor一起使用而必须满足的要求。
可以定义其他自定义选择器并将其用作为AEM SPA SDK开发的SPA的一部分。 但是,此支持要求model
选择器是第一个选择器,扩展名为.json
,作为JSON导出器所需的。
如果要使用在SPA中创建的文本组件的就地编辑器,则需要其他配置。
<div>
元素,使用的选择器是data-rte-editelement
。cq:InplaceEditingConfig
上设置指向该选择器的配置editElementQuery
,例如data-rte-editelement
。 这样,编辑者就知道哪些HTML元素会包裹HTML文本。有关如何实现此操作的示例,请参阅WKND日志示例内容。
有关editElementQuery
属性和富文本编辑器配置的详细信息,请参阅配置富文本编辑器。
AEM SPA Editor SDK随AEM 6.4 service pack 2引入。 它完全受Adobe支持,并且作为一项新功能,它将继续得到增强和扩展。 SPA编辑器尚未涵盖以下AEM功能: