SPA編輯器概述

單頁應用程式 (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 Blueprint，以符合SPA的技術需求
AEM中的SPA快速入門以快速導覽簡單的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）。
screen_shot_2018-08-20at144152

注意

cq.authoring.pagemodel.messaging類別的包含應限於SPA編輯器的上下文。

通信資料類型

當cq.authoring.pagemodel.messaging類別新增至頁面時，會傳送訊息給頁面編輯器以建立JSON通訊資料類型。當通訊資料類型設為JSON時，GET請求會與元件的Sling Model端點通訊。在頁面編輯器中發生更新後，更新元件的JSON表示法會傳送至頁面模型程式庫。接著頁面模型程式庫會通知SPA更新。

screen_shot_2018-08-20at143628

工作流程

您可以將SPA編輯器視為SPA和AEM之間的中介者，借此瞭解SPA和AEM之間的互動流程。

頁面編輯器與SPA之間的通訊是使用JSON而非HTML進行。
頁面編輯器透過iframe和傳訊API將頁面模型的最新版本提供給SPA。
頁面模型管理員會通知編輯器已準備好進行編輯，並將頁面模型傳遞為JSON結構。
編輯器不會變更或甚至存取所創作頁面的DOM結構，而是提供最新的頁面模型。

screen_shot_2018-08-20at144324

基本SPA編輯器工作流

請記住SPA編輯器的關鍵元素，作者會看到在AEM中編輯SPA的高階工作流程，如下所示。

untitled1

載入SPA編輯器。
SPA會載入個別影格中。
SPA會要求JSON內容並轉譯用戶端元件。
SPA編輯器會偵測轉譯的元件並產生覆蓋。
製作點按覆蓋，顯示元件的編輯工具列。
SPA編輯器會持續對伺服器進行POST要求的編輯。
SPA編輯器會要求將JSON更新至SPA編輯器，此編輯器會以DOM事件傳送至SPA。
SPA會重新呈現相關元件，並更新其DOM。

注意

請記住：

SPA總是負責其展示。
SPA編輯器與SPA本身隔離。
在生產（發佈）中，SPA編輯器從未載入。

客戶端——伺服器頁面編輯工作流

這是編輯SPA時主從式互動的更詳細概述。

page_editor_spa_authoringmediator-2

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_content_authoring模型

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支援下列最低版本：

React 16.x和更高版本
6.x和更高角度

這些架構的舊版可能與AEM SPA Editor SDK搭配使用，但不受支援。

其他框架

您可建置其他SPA架構，以搭配AEM SPA Editor SDK使用。請參閱SPA Blueprint檔案，瞭解架構建立由模組、元件和服務組成的架構特定層，以便與AEM SPA編輯器搭配使用的需求。

使用多個選擇器

您可以定義其他自訂選擇器，並將其用作為AEM SPA SDK所開發的SPA的一部分。但是，此支援要求model選擇器是第一個選擇器，而副檔名.json是JSON匯出器所需的。

文字編輯器需求

如果要使用在SPA中建立的文本元件的就地編輯器，則需要進行其他配置。

在包含文字HTML的容器包裝函式元素上設定屬性（可以是任何屬性）。如果是WKND Journal樣本內容，則此元素為<div>元素，而使用的選擇器為data-rte-editelement。
在對應的AEM文字元件cq:InplaceEditingConfig上設定指向該選取器的設定editElementQuery，例如data-rte-editelement。這可讓編輯者知道哪些HTML元素會包住HTML文字。

如需如何執行此操作的示例，請參閱WKND Journal示例內容。

有關editElementQuery屬性和富格文本編輯器配置的詳細資訊，請參閱配置富格文本編輯器。