單頁應用程式 (SPA) 可為網站使用者提供引人入勝的體驗。開發人員希望能夠使用SPA架構建立網站,而作者則想在AEM中順暢地編輯內容,以供使用此類架構建立的網站使用。
SPA Editor提供完整的解決方案,以支援AEM中的SPA。 本頁概述SPA支援在AEM中的結構、SPA編輯器的運作方式,以及SPA架構和AEM如何保持同步。
「單頁應用程式(SPA)編輯器」功能需要AEM 6.4 Service Pack 2或更新版本。
SPA編輯器是建議的解決方案,適用於需要以SPA架構為基礎的用戶端轉換(例如React或Angular)的專案。
使用常見SPA架構(例如Reacte和Angular)建立的網站會透過動態JSON載入其內容,而且不提供AEM頁面編輯器必須的HTML結構,才能放置編輯控制項。
若要在AEM中啟用SPA的編輯,需要SPA的JSON輸出與AEM儲存庫中的內容模型之間的對應,才能儲存對內容所做的變更。
AEM中的SPA支援提供精簡的JS層,當載入頁面編輯器時,此層會與SPA JS程式碼互動,可透過此層傳送事件,並啟動編輯控制項的位置,以允許內容內容編輯。 此功能以Content Services API Endpoint概念為基礎,因為SPA中的內容必須透過Content Services載入。
如需AEM中SPA的詳細資訊,請參閱下列檔案:
SPA的頁面元件不會透過JSP或HTL檔案提供其子元件的HTML元素。 此操作委託給SPA框架。 子元件或模型的表示方式會從JCR擷取為JSON資料結構。 然後,SPA元件會根據該結構添加到頁面中。 此行為可區分頁面元件的初始主體構成與非SPA對應項。
頁面模型的解析度和管理被委託給提供的PageModel
庫。 SPA必須使用「頁面模型」庫,才能初始化並由SPA編輯器編寫。 透過aem-react-editable-components
npm間接提供給AEM Page元件的頁面模型程式庫。 「頁面模型」是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編輯器視為SPA和AEM之間的中介者,借此瞭解SPA和AEM之間的互動流程。
請記住SPA編輯器的關鍵元素,作者會看到在AEM中編輯SPA的高階工作流程,如下所示。
載入SPA編輯器。
SPA會載入個別影格中。
SPA會要求JSON內容並轉譯用戶端元件。
SPA編輯器會偵測轉譯的元件並產生覆蓋。
製作點按覆蓋,顯示元件的編輯工具列。
SPA編輯器會持續對伺服器進行POST要求的編輯。
SPA編輯器會要求將JSON更新至SPA編輯器,此編輯器會以DOM事件傳送至SPA。
SPA會重新呈現相關元件,並更新其DOM。
請記住:
這是編輯SPA時主從式互動的更詳細概述。
SPA會自行初始化,並從Sling Model Exporter要求頁面模型。
Sling Model Exporter會要求從儲存庫中構成頁面的資源。
儲存庫返回資源。
Sling Model Exporter會傳回頁面的模型。
SPA會根據頁面模型執行個體化其元件。
6 a內容會通知編輯器已準備好進行編寫。
6 b頁面編輯器請求元件編寫配置。
6頁 面編輯器接收元件配置。
當作者編輯元件時,頁面編輯器會將修改請求張貼至預設的POST servlet。
資源在儲存庫中更新。
更新的資源將提供給POST Servlet。
預設的POST servlet通知頁面編輯器資源已更新。
頁面編輯器會要求新的頁面模型。
系統會從儲存庫請求構成該頁面的資源。
構成頁面的資源由儲存庫提供給Sling Model Exporter。
更新的頁面模型會傳回至編輯器。
頁面編輯器會更新SPA的頁面模型參考。
SPA會根據新的頁面模型參考來更新其元件。
頁面編輯器的元件組態會更新。
17 a SPA會傳訊頁面編輯器內容已就緒。
17 b頁面編輯器為SPA提供元件配置。
17 c SPA提供更新的元件組態。
這是更詳細的概述,主要針對製作體驗。
SPA讀取頁面模型。
2 頁面模型為編輯者提供製作所需的資料。
2 b當收到通知時,元件管理器會更新頁面的內容結構。
The component orchestrator queries the mapping between an AEM resource type and a SPA component.
該元件管理器基於頁面模型和元件映射動態實例化SPA元件。
頁面編輯器會更新頁面模型。
6 頁面模型為頁面編輯器提供更新的編寫資料。
6 b頁面模型將更改派單到元件Orchestrator。
元件Orchestrator讀取元件映射。
Component orchestrator會更新頁面內容。
當SPA完成頁面內容更新時,頁面編輯器會載入編寫環境。
若要讓作者使用頁面編輯器來編輯SPA的內容,您的SPA應用程式必須實作,才能與AEM SPA編輯器SDK互動。 請參閱AEM中的SPA快速入門檔案,以取得執行所需的最低資訊。
SPA編輯器SDK支援下列最低版本:
這些架構的舊版可能與AEM SPA Editor SDK搭配使用,但不受支援。
您可建置其他SPA架構,以搭配AEM SPA Editor SDK使用。 請參閱SPA Blueprint檔案,瞭解架構建立由模組、元件和服務組成的架構特定層,以便與AEM SPA編輯器搭配使用的需求。
您可以定義其他自訂選擇器,並將其用作為AEM SPA SDK所開發的SPA的一部分。 但是,此支援要求model
選擇器是第一個選擇器,而副檔名.json
是JSON匯出器所需的。
如果要使用在SPA中建立的文本元件的就地編輯器,則需要進行其他配置。
<div>
元素,而使用的選擇器為data-rte-editelement
。cq:InplaceEditingConfig
上設定指向該選取器的設定editElementQuery
,例如data-rte-editelement
。 這可讓編輯者知道哪些HTML元素會包住HTML文字。如需如何執行此操作的示例,請參閱WKND Journal示例內容。
有關editElementQuery
屬性和富格文本編輯器配置的詳細資訊,請參閱配置富格文本編輯器。
AEM SPA Editor SDK已隨AEM 6.4 Service Pack 2推出。 Adobe完全支援此功能,並將不斷加強和擴充此功能。 SPA編輯器尚未涵蓋下列AEM功能: