单页应用程序 (SPA) 可以为网站用户提供引人入胜的良好体验。开发人员希望能够使用SPA框架构建站点,而作者则希望在AEM中为使用此类框架构建的站点无缝编辑内容。
SPA编辑器提供了一个全面的解决方案,可在AEM中支持SPA。 本页概述了AEM中SPA支持的结构、SPA编辑器的工作方式以及SPA框架和AEM如何保持同步。
使用常用SPA框架(如React和Angular)构建的站点通过动态JSON加载其内容,并且不提供AEM页面编辑器放置编辑控件所必需的HTML结构。
要在AEM中启用SPA的编辑功能,需要SPA的JSON输出与AEM存储库中的内容模型之间的映射,才能保存对内容所做的更改。
AEM中的SPA支持引入了一个精简JS层,当该层在页面编辑器中加载时,会与SPA JS代码交互,通过该层可以发送事件,并且可以激活编辑控件的位置以允许进行上下文编辑。 此功能基于Content Services API端点概念,因为SPA中的内容需要通过Content Services加载。
有关AEM中SPA的更多详细信息,请参阅以下文档:
SPA的HTML组件不会通过JSP或HTL文件提供其子组件的页面元素。 此操作将委派给SPA框架。 子组件或模型的表示形式将从JCR中作为JSON数据结构获取。 然后,会根据该结构将SPA组件添加到页面中。 此行为可将页面组件的初始主体构成与非SPA对应项区分开来。
页面模型之解决方案及管理乃委派予提供 PageModel
库。 SPA必须使用页面模型库才能进行初始化,并由SPA编辑器进行创作。 通过 aem-react-editable-components
npm。 页面模型是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通信数据类型。 当通信GET类型设置为JSON时,数据请求将与组件的Sling模型端点通信。 在页面编辑器中发生更新后,更新组件的JSON表示形式将发送到页面模型库。 然后,页面模型库会通知SPA进行更新。
您可以将SPA编辑器视为SPA和AEM之间的调解者,从而了解与之间交互的流程。
请记住SPA编辑器的关键元素,创作人员可以看到在AEM中编辑SPA的高级工作流,如下所示。
请记住:
这是编辑SPA时客户端与服务器交互的更详细概述。
SPA会自行初始化,并从Sling模型导出器请求页面模型。
Sling模型导出程序从存储库请求构成页面的资源。
存储库会返回资源。
Sling模型导出程序会返回页面的模型。
SPA会根据页面模型实例化其组件。
6a 内容会通知编辑器已准备好进行创作。
6b 页面编辑器会请求组件创作配置。
6c 页面编辑器接收组件配置。
作者编辑组件时,页面编辑器会向默认POSTServlet发布修改请求。
资源将在存储库中更新。
更新的资源将提供给POSTServlet。
默认POSTServlet会通知页面编辑器资源已更新。
页面编辑器会请求新的页面模型。
从存储库请求构成页面的资源。
组成页面的资源由存储库提供给Sling模型导出器。
更新的页面模型将返回到编辑器。
页面编辑器会更新SPA的页面模型引用。
SPA会根据新的页面模型引用更新其组件。
页面编辑器的组件配置已更新。
17a SPA表示页面编辑器内容已准备就绪。
17b 页面编辑器为SPA提供了组件配置。
17c SPA提供了更新的组件配置。
以创作体验为重点,提供了更详细的概述。
SPA会获取页面模型。
2a 页面模型为编辑器提供了创作所需的数据。
2b 当收到通知时,component orchestrator会更新页面的内容结构。
组件orchestrator查询AEM资源类型与SPA组件之间的映射。
组件orchestrator根据页面模型和组件映射动态实例化SPA组件。
页面编辑器会更新页面模型。
6a 页面模型向页面编辑器提供了更新的创作数据。
6b 页面模型将更改调度到组件Orchestrator。
组件Orchestrator将获取组件映射。
组件Orchestrator会更新页面内容。
当SPA完成页面内容的更新时,页面编辑器会加载创作环境。
要使作者能够使用页面编辑器编辑SPA的内容,必须实施SPA应用程序才能与AEM SPA Editor SDK进行交互。 请参阅 AEM SPA使用React快速入门 文档,以便您运行。
SPA Editor SDK支持以下最低版本:
这些框架的早期版本可以与AEM SPA Editor SDK一起使用,但不受支持。
可以实施其他SPA框架以与AEM SPA Editor SDK一起使用。 请参阅 SPA Blueprint 记录框架必须满足的要求,以便创建由模块、组件和服务组成的特定于框架的层,以便与AEM SPA Editor一起使用。
其他自定义选择器可以定义,并用作为为AEM SPA SDK开发的SPA的一部分。 但是,此支持要求 model
选择器是第一个选择器,扩展是 .json
JSON导出程序的要求。
如果要使用在SPA中创建的文本组件的就地编辑器,则需要其他配置。
<div>
元素和使用的选择器 data-rte-editelement
.editElementQuery
对应AEM文本组件的 cq:InplaceEditingConfig
指向该选择器,例如 data-rte-editelement
. 这可让编辑者知道在HTML文本前后分别使用哪个HTML元素。有关 editElementQuery
属性和富文本编辑器的配置,请参阅 配置富文本编辑器。
AEM SPA Editor SDK完全受Adobe支持,作为一项新功能,它将继续得到增强和扩展。 SPA编辑器尚不支持以下AEM功能: