文件AEM 6.5使用手冊

通用編輯器

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用對象:
  • Experience Manager 6.5
  • 主題:
  • 開發

建立對象:

  • 開發人員

瞭解通用編輯器的彈性,以及如何協助您使用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