AEM 中 Universal Editor 快速入門

上次更新: 2024-02-27

了解如何存取 Universal Editor,以及如何開始檢測您的第一個 AEM 應用程式以使用它。

秘訣

如果您想直接研究範例,可以查看 GitHub 上的 Universal Editor 範例應用程式。

注意

Universal Editor 仍在開發中,其功能可能會發生變化,並且可能與本文件詳述的內容有所不同。

上線步驟

雖然 Universal Editor 可以編輯來自任何來源的內容,但本文件將以 AEM 應用程式為例。

入門使用AEM應用程式並檢測其是否使用通用編輯器有數個步驟。

  1. 要求存取 Universal Editor。
  2. 包括 Universal Editor 核心庫。
  3. 新增必要的 OSGi 設定。
  4. 檢測頁面。

本文件將引導您完成這些步驟。

要求存取 Universal Editor

您需要先要求存取 Universal Editor。開啟 'https://experience.adobe.com/#/aem/editor',登入並驗證您是否擁有通用編輯器的存取權。

如果您沒有存取權,可以透過同一頁面上連結的表格提出要求。

要求存取 Universal Editor

按一下​要求存取​並按照指示填寫表格以要求存取。Adobe 代表將審查您的要求並與您聯絡以討論您的使用案例。

包括 Universal Editor 核心庫。

您必須先包含下列相依性,應用程式才能透過通用編輯器進行檢測。

@adobe/universal-editor-cors

若要啟動檢測,必須將下列匯入專案新增至 index.js.

import "@adobe/universal-editor-cors";

Non-React 應用程式的替代方案

如果您未實作React應用程式和/或需要伺服器端轉譯,另一種方法是在檔案本文中納入以下內容。

<script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST" async></script>

我們一律會建議使用最新版本,但若發生重大變更,可參考舊版服務。

  • https://universal-editor-service.experiencecloud.live/corslib/LATEST — 最新UE CORS程式庫
  • https://universal-editor-service.experiencecloud.live/corslib/2/LATEST - 2.x版下最新的UE CORS程式庫
  • https://universal-editor-service.experiencecloud.live/corslib/2.1/LATEST - 2.1.x版底下最新的UE CORS程式庫
  • https://universal-editor-service.experiencecloud.live/corslib/2.1.1 — 完全相同的UE CORS程式庫2.1.1版

新增必要的 OSGi 設定

為了能夠使用 Universal Editor 透過您的應用程式編輯 AEM 內容,必須在 AEM 中完成 CORS 和 Cookie 設定。

必須在 AEM 編寫執行個體上設定以下 OSGi 設定。

  • com.day.crx.security.token.impl.impl.TokenAuthenticationHandler 中的 SameSite Cookies = None
  • 移除 X-FRAME-OPTIONS:org.apache.sling.engine.impl.SlingMainServlet 中的 SAMEORIGIN 標頭

com.day.crx.security.token.impl.impl.TokenAuthenticationHandler

登入權杖 Cookie 必須作為協力廠商網域發送到 AEM。因此,必須將同網站的 Cookie 明確設定為 None

此屬性必須在 com.day.crx.security.token.impl.impl.TokenAuthenticationHandlerOSGi 設定中設定。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="sling:OsgiConfig"
          token.samesite.cookie.attr="None" />

org.apache.sling.engine.impl.SlingMainServlet

X-Frame-Options:SAMEORIGIN 禁止在 iframe 中呈現 AEM 頁面。移除標頭可載入頁面。

此屬性必須在 org.apache.sling.engine.impl.SlingMainServletOSGi 設定中設定。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="sling:OsgiConfig"
          sling.additional.response.headers="[X-Content-Type-Options=nosniff]"/>

檢測頁面

Universal Editor 服務需要統一資源名稱 (URN) 來識別和使用正確的後端系統來處理應用程式中正在編輯的內容。因此,需要 URN 模式將內容對應回內容資源。

建立連線

應用程式中使用的連線會儲存為<meta>頁面中的標記<head>

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">
  • <category> — 這是使用兩個選項的連線分類。
  • <referenceName> - 這是簡短名稱,可在文件中重複使用以標識連線。例如 aemconnection
  • <protocol> - 這代表要使用 Universal Editor 持續性服務的哪個持續性外掛程式。例如 aem
  • <url> - 這是儲存變更之系統的 URL。例如 http://localhost:4502

識別碼 urn:adobe:aue:system 表示 Adobe Universal Editor 連線。

data-aue-resource 將使用 urn 首碼來縮短識別碼。

data-aue-resource="urn:<referenceName>:<resource>"
  • <referenceName> - 這是 <meta> 標記中提及的命名參考。例如 aemconnection
  • <resource> - 這是指向目標系統中資源的指標。像是 AEM 內容路徑,例如 /content/page/jcr:content
秘訣

請參閱文件屬性和類型以深入了解 Universal Editor 需要的資料屬性和類型。

連線範例

<meta name="urn:adobe:aue:system:<referenceName>" content="<protocol>:<url>">

<html>
<head>
    <meta name="urn:adobe:aue:system:aemconnection" content="aem:https://localhost:4502">
    <meta name="urn:adobe:aue:system:fcsconnection" content="fcs:https://example.franklin.adobe.com/345fcdd">
</head>
<body>
        <aside>
          <ul data-aue-resource="urn:aemconnection:/content/example/list" data-aue-type="container">
            <li data-aue-resource="urn:aemconnection/content/example/listitem" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">Jane Doe</p>
              <p data-aue-prop="title" data-aue-type="text">Journalist</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>

...

            <li data-aue-resource="urn:fcsconnection:/documents/mytext" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">John Smith</p>
              <p data-aue-resource="urn:aemconnection/content/example/another-source" data-aue-prop="title" data-aue-type="text">Photographer</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>
          </ul>
        </aside>
</body>
</html>

組態設定

您可以使用 config 首碼位於您的連線URN中,以視需要設定服務和擴充端點。

如果您不想使用由Adobe託管(但您自己的託管版本)的通用編輯器服務,可以在中繼標籤中設定此專案。 若要覆寫Universal Editor提供的預設服務端點,請設定您自己的服務端點:

  • 中繼名稱 — urn:adobe:aue:config:service
  • 中繼內容 — content="https://adobe.com" (範例)
<meta name="urn:adobe:aue:config:service" content="<url>">

如果您只想為頁面啟用特定擴充功能,可以在meta標籤中加以設定。 若要擷取擴充功能,請設定擴充功能端點:

  • 中繼名稱: urn:adobe:aue:config:extensions
  • 中繼內容: content="https://adobe.com,https://anotherone.com,https://onemore.com" (範例)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

您已準備好使用 Universal Editor

您的應用程式現在可以使用 Universal Editor 了!

請參閱使用 Universal Editor 編寫內容以了解內容作者使用 Universal Editor 建立內容有多簡單和直覺。

其他資源

若要了解有關 Universal Editor 的詳細資訊,請參閱以下文件。

本頁內容