AEM 中 Universal Editor 快速入門 getting-started

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

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

上線步驟 onboarding

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

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

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

要求存取 Universal Editor request-access

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

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

要求存取 Universal Editor

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

包括 Universal Editor 核心庫。 core-library

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

@adobe/universal-editor-cors

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

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

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

如果您未實作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 設定 osgi-configurations

為了能夠使用 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 samesite-cookies

登入權杖 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 sameorigin

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]"/>

檢測頁面 instrument-page

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

建立連線 connections

應用程式中使用的連線會儲存為<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
TIP
請參閱文件屬性和類型以深入了解 Universal Editor 需要的資料屬性和類型。

連線範例 example

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

組態設定 configuration-settings

您可以使用 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 youre-ready

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

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

其他資源 additional-resources

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

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab