通用編輯器 universal-editor

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

概觀 overview

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

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

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

架構 architecture

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

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

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

設定 setup

若要測試通用編輯器,您需要:

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

更新AEM update-aem

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

套用最新Service Pack latest

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

安裝通用編輯器Feature Pack feature-pack

安裝Software Distribution上提供的AEM 6.5 **適用的**​通用編輯器功能套件。

如果您已執行Service Pack 23或更新版本,就不需要使用Feature Pack。

設定服務 configure-services

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

設定login-token Cookie的SameSite屬性。 samesite-attribute

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

移除SAMEORIGIN標題X-Frame選項。 sameorigin

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

設定AdobeGranite查詢引數驗證處理常式。 query-parameter

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

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

  1. 開啟Configuration Manager。

    • http://<host>:<port>/system/console/configMgr
  2. 在清單中找到​ 通用編輯器URL服務,然後按一下​ 編輯設定值

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

    • 在​ Universal Editor Opening Mapping ​欄位中,提供開啟Universal Editor的路徑。
    • 在應由通用編輯器開啟的​ Sling:resourceTypes ​欄位中,提供由通用編輯器直接開啟的資源清單。
  4. 按一下「儲存」。

AEM會根據此設定開啟頁面的通用編輯器。

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

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

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

範例對應:

  • 在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>

設定通用編輯器服務 set-up-ue

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

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

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

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

  4. 執行universal-editor-service.cjs

更新Dispatcher update-dispatcher

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

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

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

檢測您的應用程式 instrumentation

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

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

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

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

    code language-html
    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>
    
  • 必須透過meta標籤公告Universal Editor服務端點。

    code language-html
    <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之間的差異 differences

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