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的頁面元件不會透過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

  1. 載入SPA編輯器。

  2. SPA會載入個別影格中。

  3. SPA會要求JSON內容並轉譯用戶端元件。

  4. SPA編輯器會偵測轉譯的元件並產生覆蓋。

  5. 製作點按覆蓋,顯示元件的編輯工具列。

  6. SPA編輯器會持續對伺服器進行POST要求的編輯。

  7. SPA編輯器會要求將JSON更新至SPA編輯器,此編輯器會以DOM事件傳送至SPA。

  8. SPA會重新呈現相關元件,並更新其DOM。

注意

請記住:

  • SPA總是負責其展示。
  • SPA編輯器與SPA本身隔離。
  • 在生產(發佈)中,SPA編輯器從未載入。

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

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

page_editor_spa_authoringmediator-2

  1. SPA會自行初始化,並從Sling Model Exporter要求頁面模型。

  2. Sling Model Exporter會要求從儲存庫中構成頁面的資源。

  3. 儲存庫返回資源。

  4. Sling Model Exporter會傳回頁面的模型。

  5. SPA會根據頁面模型執行個體化其元件。

  6. 6 a內容會通知編輯器已準備好進行編寫。

    6 b頁面編輯器請求元件編寫配置。

    6頁 面編輯器接收元件配置。

  7. 當作者編輯元件時,頁面編輯器會將修改請求張貼至預設的POST servlet。

  8. 資源在儲存庫中更新。

  9. 更新的資源將提供給POST Servlet。

  10. 預設的POST servlet通知頁面編輯器資源已更新。

  11. 頁面編輯器會要求新的頁面模型。

  12. 系統會從儲存庫請求構成該頁面的資源。

  13. 構成頁面的資源由儲存庫提供給Sling Model Exporter。

  14. 更新的頁面模型會傳回至編輯器。

  15. 頁面編輯器會更新SPA的頁面模型參考。

  16. SPA會根據新的頁面模型參考來更新其元件。

  17. 頁面編輯器的元件組態會更新。

    17 a SPA會傳訊頁面編輯器內容已就緒。

    17 b頁面編輯器為SPA提供元件配置。

    17 c SPA提供更新的元件組態。

編寫工作流程

這是更詳細的概述,主要針對製作體驗。

spa_content_authoring模型

  1. SPA讀取頁面模型。

  2. 2 頁面模型為編輯者提供製作所需的資料。

    2 b當收到通知時,元件管理器會更新頁面的內容結構。

  3. The component orchestrator queries the mapping between an AEM resource type and a SPA component.

  4. 該元件管理器基於頁面模型和元件映射動態實例化SPA元件。

  5. 頁面編輯器會更新頁面模型。

  6. 6 頁面模型為頁面編輯器提供更新的編寫資料。

    6 b頁面模型將更改派單到元件Orchestrator。

  7. 元件Orchestrator讀取元件映射。

  8. Component orchestrator會更新頁面內容。

  9. 當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中建立的文本元件的就地編輯器,則需要進行其他配置。

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

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

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

限制

AEM SPA Editor SDK已隨AEM 6.4 Service Pack 2推出。 Adobe完全支援此功能,並將不斷加強和擴充此功能。 SPA編輯器尚未涵蓋下列AEM功能:

  • 目標模式
  • ContextHub
  • 內嵌影像編輯
  • 編輯設定(例如 偵聽器)
  • 樣式系統
  • 還原/重做
  • 頁面差異與時間彎曲
  • 執行HTML重寫伺服器端的功能,例如連結檢查器、CDN重寫器服務、URL縮短等。
  • 開發人員模式
  • AEM啟動

本頁內容