Komma igång med Universal Editor i AEM

Lär dig hur du får tillgång till den universella redigeraren och hur du börjar använda den i ditt första AEM.

TIPS

Om du hellre vill dyka rakt in i ett exempel kan du läsa Universal Editor Sample App på GitHub.

Inledande steg

Även om den universella redigeraren kan redigera innehåll från valfri källa, kommer det här dokumentet att använda ett AEM program som exempel.

Det finns ett antal steg för att komma igång med AEM och instrumentera den så att den kan använda den universella redigeraren.

  1. Begär åtkomst till Universal Editor.
  2. Inkludera grundbiblioteket för Universal Editor.
  3. Lägg till nödvändig OSGi-konfiguration.
  4. Instrumentera sidan.

Det här dokumentet vägleder dig genom dessa steg.

Begär åtkomst till den universella redigeraren

Du måste först begära åtkomst till Universal Editor. Gå till https://experience.adobe.com/#/aem/editor, logga in och validera om du har tillgång till den universella redigeraren.

Om du inte har åtkomst kan du begära det via ett formulär som är länkat på samma sida.

Begär åtkomst till Universal Editor

Klicka Begär åtkomst och fylla i formuläret enligt anvisningarna för att begära åtkomst. En Adobe-representant kommer att granska din begäran och inhämta information för att diskutera ditt användningsfall.

Include the Universal Editor Core Library

Innan ditt program kan instrumenteras för användning med den universella redigeraren måste det innehålla följande beroenden.

@adobe/universal-editor-cors

Om du vill aktivera instrumenteringen måste följande import läggas till i index.js.

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

Alternativ för appar som inte kan reagera

Om du inte implementerar ett React-program och/eller kräver serveråtergivning är en alternativ metod att inkludera följande i dokumentets brödtext.

<script src="https://cdn.jsdelivr.net/gh/adobe/universal-editor-cors/dist/universal-editor-embedded.js" async></script>

Lägg till nödvändiga OSGi-konfigurationer

För att kunna redigera AEM med din app med Universal Editor måste CORS och cookie-inställningarna göras i AEM.

Följande OSGi-konfigurationer måste anges för AEM.

  • SameSite Cookies = None in com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
  • Ta bort X-FRAME-OPTIONS: SAMEORIGIN Header in org.apache.sling.engine.impl.SlingMainServlet

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

Inloggningstokens cookie måste skickas till AEM som en tredjepartsdomän. Därför måste cookie-filen för samma plats anges explicit till None.

Den här egenskapen måste anges i com.day.crx.security.token.impl.impl.TokenAuthenticationHandler OSGi-konfiguration.

<?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 förhindrar återgivning AEM sidor i en iframe. Om du tar bort sidhuvudet kan sidorna läsas in.

Den här egenskapen måste anges i org.apache.sling.engine.impl.SlingMainServlet OSGi-konfiguration.

<?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 för sidan

Tjänsten Universal Editor kräver en enhetligt resursnamn (URN) för att identifiera och använda rätt serverdelssystem för innehållet i den app som redigeras. Därför krävs ett URN-schema för att mappa tillbaka innehåll till innehållsresurser.

De instrumentattribut som läggs till på sidan består huvudsakligen av HTML Microdata, en branschstandard som också kan användas för att göra HTML mer semantiskt, göra HTML-dokument indexerbara osv.

Skapa anslutningar

Anslutningar som används i appen lagras som <meta> taggar på sidans <head>.

<meta name="urn:adobe:aem:editor:<referenceName>" content="<protocol>:<url>">
  • <referenceName> - Det här är ett kort namn som återanvänds i dokumentet för att identifiera anslutningen. T.ex. aemconnection
  • <protocol> - Detta anger vilket beständighets-plugin-program för Universal Editor Persistence Service som ska användas. T.ex. aem
  • <url> - Detta är URL:en till det system där ändringarna ska kvarstå. T.ex. http://localhost:4502

Identifieraren adobe:aem:editor representerar anslutningen för Adobe Universal Editor.

itemids kommer att använda urn för att förkorta identifieraren.

itemid="urn:<referenceName>:<resource>"
  • <referenceName> - Detta är den namngivna referens som omnämns i <meta> -tagg. T.ex. aemconnection
  • <resource> - Detta är en pekare till resursen i målsystemet. t.ex. en AEM innehållssökväg som /content/page/jcr:content
TIPS

Se dokumentet Attribut och typer om du vill ha mer information om de dataattribut och datatyper som krävs för den universella redigeraren.

Exempelanslutning

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

...

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

Du är redo att använda den universella redigeraren

Din app är nu instrumenterad för att använda den universella redigeraren!

Se dokumentet Skapa innehåll med den universella redigeraren om du vill lära dig hur enkelt och intuitivt det är för skribenter att skapa innehåll med den universella redigeraren.

Ytterligare resurser

Mer information om Universal Editor finns i de här dokumenten.

På denna sida