Komma igång med Universal Editor i AEM getting-started

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.

TIP
Om du hellre vill dyka rakt in i ett exempel kan du granska Universal Editor-exempelappen på GitHub.

Ä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 här dokumentet vägleder dig genom de här stegen.

Instrument för sidan instrument-page

Universal Editor kräver ett JavaScript-bibliotek för att sidan ska kunna återges och redigeras i redigeraren.

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

Inkludera Universal Editor CORS Library cors-library

För att den universella redigeraren ska kunna ansluta till ditt program måste ditt program innehålla Universal Editor CORS-biblioteket. Lägg till följande skript i din app.

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

Skapa anslutningar connections

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

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">
  • <category> - Det här är en klassificering av anslutningen med två alternativ.

  • <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 den universella redigerarens beständighetstjänst som ska användas. T.ex. aem

  • <url> - Det här är URL:en till systemet där ändringarna ska sparas. T.ex. http://localhost:4502

Identifieraren urn:adobe:aue:system representerar anslutningen för Adobe Universal Editor.

data-aue-resource använder prefixet urn för att korta ned identifieraren.

data-aue-resource="urn:<referenceName>:<resource>"
  • <referenceName> - Det här är den namngivna referensen som nämns i <meta> -taggen. T.ex. aemconnection
  • <resource> - Detta är en pekare till resursen i målsystemet. Till exempel en AEM innehållssökväg som /content/page/jcr:content
TIP
I dokumentet Attribut och typer finns mer information om de dataattribut och datatyper som krävs för den universella redigeraren.

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

Konfigurationsinställningar configuration-settings

Du kan använda prefixet config i anslutnings-URN för att ange tjänste- och tilläggsslutpunkter om det behövs.

Om du inte vill använda Universal Editor, som hanteras av Adobe, men din egen värdversion, kan du ange detta i en metatagg. Om du vill skriva över standardtjänstslutpunkten som tillhandahålls av Universal Editor anger du en egen tjänstslutpunkt:

  • Meta name - urn:adobe:aue:config:service
  • Metainnehåll - content="https://adobe.com" (exempel)
<meta name="urn:adobe:aue:config:service" content="<url>">

Om du bara vill aktivera vissa tillägg för en sida kan du ange detta i en metatagg. Om du vill hämta tillägg anger du slutpunkterna för tillägget:

  • Metanamn: urn:adobe:aue:config:extensions
  • Metainnehåll: content="https://adobe.com,https://anotherone.com,https://onemore.com" (exempel)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Definiera för vilka innehållssökvägar eller sling:resourceType som den universella redigeraren ska öppnas. (Valfritt) content-paths

Om du har ett befintligt AEM med sidredigeraren när innehållsförfattare redigerar sidor öppnas sidorna automatiskt med sidredigeraren. Du kan definiera vilken redigerare AEM ska öppna baserat på innehållssökvägarna eller sling:resourceType, vilket gör upplevelsen sömlös för författarna, oavsett vilken redigerare som krävs för det valda innehållet.

  1. Öppna Configuration Manager.

    http://<host>:<port>/system/console/configMgr

  2. Leta reda på URL-tjänsten för den universella redigeraren i listan och klicka på Redigera konfigurationsvärdena.

  3. Definiera för vilka innehållssökvägar eller sling:resourceType som den universella redigeraren ska öppnas.

    • Ange sökvägarna som den universella redigeraren öppnas för i fältet Öppna mappning för den universella redigeraren.
    • I fältet Sling:resourceTypes, som ska öppnas av Universell redigerare, anger du en lista över resurser som ska öppnas direkt av Universell redigerare.
  4. Klicka på Spara.

AEM kommer att öppna Universal Editor för sidor som baseras på den här konfigurationen i följande ordning.

  1. AEM kontrollerar mappningarna under Universal Editor Opening Mapping och om innehållet finns under sökvägar som definierats där öppnas Universell redigerare för det.
  2. För innehåll som inte finns under sökvägar som definieras i Universal Editor Opening Mapping kontrollerar AEM om resourceType för innehållet matchar de som definieras i Sling:resourceTypes, som ska öppnas av Universal Editor, och om innehållet matchar någon av dessa typer, öppnas Universell redigerare för det på ${author}${path}.html.
  3. I annat fall AEM sidredigeraren.

Följande variabler är tillgängliga för att definiera dina mappningar i fältet Öppna mappning för Universal Editor.

  • path: Innehållssökvägen för resursen som ska öppnas
  • localhost: Post för externalisering för localhost utan schema, t.ex. localhost:4502
  • author: Externalizer-post för författare utan schema, t.ex. localhost:4502
  • publish: Post för externalisering för publicering utan schema, t.ex. localhost:4503
  • preview: Externalizer-post för förhandsgranskning utan schema, t.ex. localhost:4504
  • env: prod, stage, dev baserat på definierade körningslägen för Sling
  • token: Frågetoken krävs för QueryTokenAuthenticationHandler

Exempelmappningar example-mappings

  • Öppna alla sidor under /content/foo på AEM författare:

    • /content/foo:${author}${path}.html?login-token=${token}
    • Detta resulterar i att https://localhost:4502/content/foo/x.html?login-token=<token> öppnas
  • Öppna alla sidor under /content/bar på en fjärr-NextJS-server, med alla variabler som information:

    • /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
    • Detta resulterar i att https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token> öppnas

Du är redo att använda den universella redigeraren youre-ready

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

Se Skapa innehåll med den universella redigeraren för att lära dig hur enkelt och intuitivt det är för innehållsförfattare att skapa innehåll med den universella redigeraren.

Ytterligare resurser additional-resources

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

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