文件AEMAEM 教學課程AEM as a Cloud Service 教學課程

使用通用編輯器編輯React應用程式

Last update: Mon Mar 24 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 中繼
  • 開發人員

瞭解如何使用通用編輯器編輯範例React應用程式的內容。 內容儲存在AEM的內容片段中，並使用GraphQL API擷取。

本教學課程會引導您完成設定本機開發環境的程式、檢測React應用程式以編輯其內容，以及使用通用編輯器編輯內容。

您能學到的內容

本教學課程涵蓋下列主題：

  • Universal Editor的簡短概述

  • 設定本機開發環境

    • AEM SDK：它使用GraphQL API為React應用程式提供儲存在內容片段中的內容。
    • React應用程式：顯示AEM內容的簡單使用者介面。
    • 通用編輯器服務：繫結通用編輯器和AEM SDK的​ 通用編輯器服務 ​本機復本。

  • 如何使用通用編輯器檢測React應用程式以編輯內容

  • 如何使用通用編輯器編輯React應用程式內容

通用編輯器概觀

Universal Editor可讓內容作者和開發人員（前端和後端）檢視一些Universal Editor的主要優點：

  • 專為在「所見即所得」(WYSIWYG)模式中編輯Headless和Headful內容所打造。
  • 跨不同的前端技術(如React、Angular、Vue等)提供一致的內容編輯體驗。 因此，內容作者可以編輯內容，而不用擔心基礎的前端技術。
  • 在前端應用程式中啟用通用編輯器需要非常少的工具。 因此，開發人員可以發揮最大生產力，並騰出時間專注在打造體驗上。
  • 將關注點分隔給三個角色：內容作者、前端開發人員和後端開發人員，讓每個角色都能專注於核心責任。

範例React應用程式

本教學課程使用​ WKND Teams 作為範例React應用程式。 WKND Teams React應用程式會顯示團隊成員清單及其詳細資料。

標題、說明和團隊成員等團隊詳細資料會在AEM中儲存為​ 團隊 ​內容片段。 同樣地，姓名、履歷和個人資料圖片等個人詳細資料也會儲存為AEM中的​ 個人 ​內容片段。

AEM使用GraphQL API提供React應用程式的內容，而使用者介面是使用兩個React元件Teams和Person建置。

有對應的教學課程可學習如何建立​ WKND Teams React應用程式。 您可以在這裡找到教學課程。

下一步

瞭解如何設定本機開發環境

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69