單頁應用程式 (SPA) 可為網站使用者提供引人入勝的體驗。開發人員希望能使用SPA架構建立網站,而作者則想在AEM中為使用此架構建立的網站順暢地編輯內容。
SPA編輯器提供全方位的解決方案,可支援AEM中的SPA。 本頁概略說明AEM中SPA支援的結構、SPA編輯器的運作方式,以及SPA架構和AEM如何保持同步。
單頁應用程式(SPA)編輯器功能需要AEM 6.4 service pack 2或更新版本。
若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPA Editor是建議的解決方案。
使用通用SPA架構(例如React和Angular)建置的網站會透過動態JSON載入其內容,不提供AEM頁面編輯器必須的HTML結構,才能放置編輯控制項。
若要啟用AEM內的SPA編輯功能,需要SPA的JSON輸出與AEM存放庫中的內容模型之間的對應,才能儲存內容的變更。
AEM中的SPA支援導入了精簡JS層,當載入頁面編輯器時,此層會與SPA JS程式碼互動,以便傳送事件,並啟用編輯控制項的位置以允許內容內編輯。 此功能以「內容服務API端點」概念為基礎,因為SPA的內容需透過「內容服務」載入。
如需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模型端點通訊。 在頁面編輯器中發生更新後,更新元件的JSON表示會傳送至頁面模型程式庫。 然後頁面模型程式庫會通知SPA更新。
您可以將SPA編輯器視為SPA與AEM之間的調解者,借此了解與之間互動的流程。
銘記SPA編輯器的關鍵元素,作者可在AEM中編輯SPA的高階工作流程如下所示。
SPA編輯器載入。
SPA會載入個別影格中。
SPA要求JSON內容並轉譯用戶端元件。
SPA編輯器會偵測轉譯的元件並產生覆蓋。
製作按一下覆蓋圖,顯示元件的編輯工具列。
SPA編輯器會持續編輯並提出POST請求給伺服器。
SPA編輯器向SPA編輯器請求更新JSON,此編輯器會以DOM事件傳送至SPA。
SPA會重新轉譯相關元件,並更新其DOM。
請記住:
這是編輯SPA時,用戶端與伺服器互動的更詳細概述。
SPA會自行初始化,並向Sling模型匯出器要求頁面模型。
Sling模型匯出工具會要求從存放庫組成頁面的資源。
存放庫會傳回資源。
Sling模型匯出器會傳回頁面的模型。
SPA會根據頁面模型將元件實例化。
6 內容會通知編輯器已可供編寫。
6 b頁面編輯器會要求元件編寫設定。
6 頁面編輯器會接收元件設定。
作者編輯元件時,頁面編輯器會向預設的POSTservlet發佈修改請求。
資源會在存放庫中更新。
更新的資源提供給POSTservlet。
預設的POSTservlet會通知頁面編輯器資源已更新。
頁面編輯器會要求新的頁面模型。
系統會從存放庫請求組成頁面的資源。
組成頁面的資源由存放庫提供給Sling模型匯出工具。
更新的頁面模型會傳回至編輯器。
頁面編輯器會更新SPA的頁面模型參考。
SPA會根據新的頁面模型參考來更新其元件。
更新頁面編輯器的元件設定。
17 aSPA代表頁面編輯器內容已就緒。
17 b頁面編輯器為SPA提供元件設定。
17 cSPA提供更新的元件設定。
此為更詳細的概述,著重於製作體驗。
SPA會擷取頁面模型。
2 頁面模型可為編輯器提供編寫所需的資料。
2 b通知後,元件管理器會更新頁面的內容結構。
元件Orchestrator會查詢AEM資源類型與SPA元件之間的映射。
元件Orchestrator根據頁面模型和元件映射動態實例化SPA元件。
頁面編輯器會更新頁面模型。
6 頁面模型提供更新的頁面編輯器編寫資料。
6 b頁面模型將更改分派到元件Orchestrator。
元件Orchestrator會擷取元件對應。
元件Orchestrator會更新頁面內容。
當SPA完成更新頁面內容時,頁面編輯器會載入製作環境。
若要讓作者能使用頁面編輯器來編輯SPA的內容,您必須實作SPA應用程式,才能與AEM SPA Editor SDK互動。 請參閱AEM🔗中的SPA快速入門檔案,了解執行作業所需的最低資訊。
SPA Editor 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日誌示例內容。
有關editElementQuery
屬性和RTF編輯器配置的詳細資訊,請參閱配置RTF編輯器。
AEM SPA Editor SDK已隨AEM 6.4 Service Pack 2推出。 它得到Adobe的充分支援,並作為一項新功能繼續得到增強和擴展。 SPA編輯器尚未涵蓋下列AEM功能: