文件AEM 6.5使用手冊

通用編輯器

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：
  • 開發

建立對象：

  • 開發人員

瞭解通用編輯器的彈性，以及如何協助您使用AEM 6.5強化Headless體驗。

概觀

通用編輯器是多功能的視覺化編輯器，屬於Adobe Experience Manager Sites的一部分。 它可讓作者對任何Headless體驗進行即席即得(WYSIWYG)編輯。

  • 由於通用編輯器支援對所有形式的AEM Headless內容進行相同一致的視覺編輯，因此作者可受益於通用編輯器的彈性。
  • 開發人員可受益於Universal Editor的多功能性，因為它也支援實作的真正分離。 它可讓開發人員利用他們選擇的任何架構或架構，而不受任何SDK或技術限制。

如需詳細資訊，請參閱通用編輯器🔗上的AEM as a Cloud Service檔案。

架構

Universal Editor是一項與AEM搭配使用的服務，可讓您無頭製作內容。

  • Universal Editor託管於https://experience.adobe.com/#/aem/editor/canvas，可編輯AEM 6.5轉譯的頁面。
  • Universal Editor會透過AEM作者例項中的Dispatcher讀取AEM頁面。
  • 與Dispatcher在相同主機上執行的Universal Editor服務會將變更寫回AEM作者例項。

使用通用編輯器的作者流程

要求

下列專案支援通用編輯器：

  • AEM 6.5 （service pack 21或22 plus a feature pack）
    • 同時支援內部部署和AMS託管。
  • AEM as a Cloud Service （版本2023.8.13099或更新版本）

本檔案著重於通用編輯器的AEM 6.5支援。

設定

若要測試通用編輯器，您需要：

  1. 更新及設定您的AEM編寫執行個體。
  2. 設定本機通用編輯器服務。
  3. 調整您的Dispatcher以允許Universal Editor服務。

完成設定之後，您可以檢測應用程式以使用通用編輯器。

更新AEM

若要搭配AEM 6.5使用通用編輯器，需要AEM的Service Pack 21或22以及Feature Pack。

套用最新Service Pack

請確定您至少正在執行AEM 6.5適用的Service Pack 21或22。您可以從軟體發佈下載最新的Service Pack。

安裝通用編輯器Feature Pack

安裝Software Distribution提供的AEM 6.5 **適用的** Universal Editor Feature Pack。

如果您已執行Service Pack 23或更新版本，則不需要此Feature Pack。

設定服務

此Feature Pack會安裝許多需要額外設定的新套件。

設定login-token Cookie的SameSite屬性。

  1. 開啟Configuration Manager。
    • http://<host>:<port>/system/console/configMgr
  2. 在清單中找到​ Adobe Granite Token Authentication Handler，然後按一下​ 變更組態值。
  3. 在對話方塊中，將登入權杖cookie (token.samesite.cookie.attr)值的 SameSite屬性變更為Partitioned。
  4. 按一下「儲存」。

移除SAMEORIGIN標題X-Frame選項。

  1. 開啟Configuration Manager。
    • http://<host>:<port>/system/console/configMgr
  2. 在清單中找到​ Apache Sling主要Servlet，然後按一下​ 編輯設定值。
  3. 刪除​ 其他回應標頭 ​屬性(sling.additional.response.headers)中的X-Frame-Options=SAMEORIGIN值（如果存在）。
  4. 按一下「儲存」。

設定Adobe Granite查詢引數驗證處理常式。

  1. 開啟Configuration Manager。
    • http://<host>:<port>/system/console/configMgr
  2. 在清單中找到​ Adobe Granite查詢引數驗證處理常式，然後按一下​ 編輯組態值。
  3. 在​ 路徑 ​欄位(path)中新增/以啟用。
    • 空值會停用驗證處理常式。
  4. 按一下「儲存」。

定義應開啟通用編輯器的內容路徑或sling:resourceTypes。

  1. 開啟Configuration Manager。

    • http://<host>:<port>/system/console/configMgr

  2. 在清單中找到​ 通用編輯器URL服務，然後按一下​ 編輯設定值。

  3. 定義應開啟通用編輯器的內容路徑或sling:resourceTypes。

    • 在​ Universal Editor Opening Mapping ​欄位中，提供開啟Universal Editor的路徑。
    • 在應由通用編輯器開啟的​ Sling：resourceTypes ​欄位中，提供由通用編輯器直接開啟的資源清單。

  4. 按一下「儲存」。

  5. 檢查您的外部化程式組態，並確定您至少有本機、作者和發佈環境設定，如下列範例所示。

    "local $[env:AEM_EXTERNALIZER_LOCAL;default=http://localhost:4502]",
"author $[env:AEM_EXTERNALIZER_AUTHOR;default=http://localhost:4502]",
"publish $[env:AEM_EXTERNALIZER_PUBLISH;default=http://localhost:4503]"

完成這些設定步驟後，AEM將依下列順序開啟頁面的通用編輯器。

  1. AEM將檢查Universal Editor Opening Mapping底下的對應，如果內容位於該處定義的任何路徑下，則會為其開啟通用編輯器。
  2. 對於不在Universal Editor Opening Mapping中定義的路徑下的內容，AEM會檢查內容的resourceType是否與​ Sling：resourceTypes （應由通用編輯器 ​開啟）中定義的內容相符，如果內容符合其中一個型別，則在${author}${path}.html為其開啟通用編輯器。
  3. 否則，AEM會開啟頁面編輯器。

下列變數可用來定義Universal Editor Opening Mapping下的對應。

  • path：要開啟之資源的內容路徑
  • localhost： localhost的Externalizer專案沒有結構描述，例如localhost:4502
  • author：沒有結構描述的作者的Externalizer專案，例如localhost:4502
  • publish：用於沒有結構描述的發行的Externalizer專案，例如localhost:4503
  • preview：預覽的外部化程式專案，不含結構描述，例如localhost:4504
  • env： prod、stage、dev根據定義的Sling執行模式
  • token： QueryTokenAuthenticationHandler所需的查詢權杖

範例對應：

  • 在AEM作者上開啟/content/foo下的所有頁面：

    • /content/foo:${author}${path}.html?login-token=${token}
    • 這會導致開啟https://localhost:4502/content/foo/x.html?login-token=<token>

  • 在遠端NextJS伺服器上開啟/content/bar下的所有頁面，提供所有變數作為資訊

    • /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
    • 這會導致開啟https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

設定通用編輯器服務

更新並設定AEM後，您就可以設定本機通用編輯器服務，以供您自己的本機開發和測試使用。

  1. 安裝Node.js version >=20。

  2. 從Software Distribution下載並解除封裝最新的Universal Editor服務

  3. 透過環境變數或.env檔案設定Universal Editor Service。

    • 如需詳細資訊，請參閱AEM as a Cloud Service Universal Editor檔案。
    • 請注意，如果需要內部IP重寫，您可能需要使用UES_MAPPING選項。

  4. 執行universal-editor-service.cjs

更新Dispatcher

設定AEM且執行本機Universal Editor服務時，您必須在Dispatcher中允許新服務的反向Proxy。

  1. 調整製作執行個體的vhost檔案，以包含反向Proxy。

    <IfModule mod_proxy.c>
 ProxyPass "/universal-editor" "http://localhost:8080"
 ProxyPassReverse "/universal-editor" "http://localhost:8080"
</IfModule>
    NOTE
    8080是預設連線埠。 如果您使用您的.env檔案，中的UES_PORT引數變更此專案，您必須在此相應地調整連線埠值。

  2. 重新啟動Apache。

檢測您的應用程式

更新AEM並執行本機Universal Editor Service後，您就可以使用Universal Editor開始編輯Headless內容。

不過，您的應用程式必須檢測為使用通用編輯器。 這涉及包括中繼標籤，以指示編輯器如何以及在何處保留內容。 此檢測的詳細資訊可在AEM as a Cloud Service的通用編輯器檔案中取得。

請注意，在針對AEM as a Cloud Service通用編輯器編寫以下檔案時，將其與AEM 6.5搭配使用時將套用以下變更。

  • 中繼標籤中的通訊協定必須是aem65而非aem。

    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>

  • 必須透過meta標籤公告Universal Editor服務端點。

    <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>

  • 在元件定義的plugins區段中，必須使用aem65而非aem。

TIP
如需開發人員快速入門通用編輯器的完整指南，請參閱AEM as a Cloud Service檔案中的檔案AEM開發人員的通用編輯器概述，同時牢記本節所述的AEM 6.5支援所需的必要變更。

AEM 6.5與AEM as a Cloud Service之間的差異

AEM 6.5中的通用編輯器的運作方式與AEM as a Cloud Service大致相同，包括UI和大部分設定。 不過，請注意其中的差異。

  • 6.5中的通用編輯器僅支援Headless使用案例。
  • 通用編輯器的設定對6.5稍有不同（如目前檔案所述）。
  • 6.5中的Universal Editor使用與AEM as a Cloud Service不同的資產選擇器和內容片段選擇器。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2