DokumentationAEM as a Cloud ServiceAnvändarhandbok

Universal Editor Overview for AEM Developers developer-overview

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Administratör
  • Utvecklare

Om du är en AEM utvecklare som är intresserad av hur den universella redigeraren fungerar och hur du använder den i ditt projekt ger det här dokumentet dig en introduktion genom att leda dig genom att instrumentera WKND-projektet så att det fungerar tillsammans med den universella redigeraren.

Syfte purpose

Det här dokumentet är en introduktion för utvecklare av både hur den universella redigeraren fungerar och hur du kan mäta hur programmet fungerar med det.

Den gör detta genom att ta ett standardexempel som de flesta AEM utvecklare känner till, Core Components och WKND, och tolkar några exempelkomponenter som kan redigeras med Universal Editor.

TIP
Det här dokumentet innehåller extra steg som illustrerar hur den universella redigeraren fungerar och är avsett att fördjupa utvecklarens förståelse för redigeraren. Det är därför inte den mest direkta vägen till att instrumentera ett program, utan det mest illustrativa i den universella redigeraren och hur det fungerar.
Om du vill komma igång så snabbt som möjligt kan du läsa dokumentet Komma igång med den universella redigeraren i AEM.

Förutsättningar prerequisites

Du behöver följande för att kunna följa med i den här översikten.

Förutom att man är allmänt bekant med webbutveckling utgår man i det här dokumentet från att man är van vid AEM. Om du inte är van vid AEM kan du överväga att granska WKND-självstudiekursen innan du fortsätter.

Starta AEM och logga in i den universella redigeraren sign-in

Om du inte redan har det måste du ha den lokala AEM utvecklingsinstansen installerad med WKND och HTTPS aktiverad som enligt villkoren. Den här översikten förutsätter att din instans körs vid https://localhost:8443.

  1. Öppna mallsidan för WKND English i AEM Editor.

    code language-text 
    https://localhost:8443/editor.html/content/wknd/language-masters/en.html

  2. Välj Visa som publicerad på menyn Sidinformation i redigeraren. Då öppnas samma sida på en ny flik med AEM Editor inaktiverat.

    code language-text 
    https://localhost:8443/content/wknd/language-masters/en.html?wcmmode=disabled

  3. Kopiera länken.

  4. Logga nu in på Universal Editor.

    code language-text 
    https://experience.adobe.com/#/aem/editor

  5. Klistra in länken som du kopierade tidigare av WKND-innehållet i fältet Webbplats-URL i den universella redigeraren och klicka på Öppna.

    Öppna WKND-sidan i den universella redigeraren

Universal Editor försöker läsa in innehållet sameorigin

Universal Editor läser in innehåll som ska redigeras i en ram. Om du AEM standardinställningarna för X-Frame-alternativ förhindrar du detta, vilket tydligt kan ses som ett fel i webbläsaren och visas i konsolutdata när du försöker läsa in din lokala kopia av WKND.

Webbläsarfel på grund av SAMEORIGIN-alternativet

Alternativet X-Frame sameorigin förhindrar återgivning AEM sidor i en ram. Du måste ta bort det här sidhuvudet för att sidorna ska kunna läsas in i Universal Editor.

  1. Öppna Configuration Manager.

    code language-text 
    https://localhost:8443/system/console/configMgr

  2. Redigera OSGi-konfigurationen org.apache.sling.engine.impl.SlingMainServlet

    OSGi-egenskap för SAMEORIGIN

  3. Ta bort egenskapen X-Frame-Options=SAMEORIGIN för egenskapen Ytterligare svarshuvuden.

  4. Spara ändringarna.

Om du nu läser in den universella redigeraren igen ser du att AEM sida läses in.

TIP

Hantera samma webbplatskookies samesite-cookies

När Universal Editor läser in sidan, läses den in till AEM inloggningssida för att säkerställa att du är autentiserad att göra ändringar.

Du kan dock inte logga in. När du visar webbläsarkonsolen ser du att webbläsaren har blockerat indata i bildrutan

Indata blockerad

Inloggningstokens cookie skickas till AEM som en tredjepartsdomän. Därför måste cookies på samma plats tillåtas i AEM.

  1. Öppna Configuration Manager.

    code language-text 
    https://localhost:8443/system/console/configMgr

  2. Redigera OSGi-konfigurationen com.day.crx.security.token.impl.impl.TokenAuthenticationHandler

    OSGi-egenskap för cookies för samma webbplats

  3. Ändra egenskapen SameSite-attributet för cookien för inloggningstoken till None.

  4. Spara ändringarna.

Om du nu läser in den universella redigeraren igen kan du logga in på AEM och målsidan läses in.

TIP

Universell redigerare Ansluter till fjärrramen ue-connect-remote-frame

När sidan har lästs in i Universal Editor och du har loggat in på AEM försöker Universal Editor ansluta till fjärrbildrutan. Detta görs via ett JavaScript-bibliotek som måste läsas in i fjärrbildrutan. Om JavaScript-biblioteket inte finns skapas ett timeout-fel i konsolen.

Timeout-fel

Du måste lägga till det nödvändiga JavaScript-biblioteket till sidkomponenten i WKND-appen.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Redigera filen customheaderlibs.html under /apps/wknd/components/page.

    Redigera filen customheaderlibs.html

  3. Lägg till JavaScript-biblioteket i slutet av filen.

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

  4. Klicka på Spara alla och läs sedan in den universella redigeraren igen.

Sidan läses nu in med rätt JavaScript-bibliotek så att den universella redigeraren kan ansluta till sidan och timeoutfelet visas inte längre i konsolen.

TIP
  • Biblioteket kan läsas in antingen i sidhuvudet eller i sidfoten.
  • universal-editor-embedded.js-biblioteket är tillgängligt på NPM och du kan vara värd för det själv om det behövs eller placera det direkt i programmet.

Definiera en anslutning för att behålla ändringar connection

WKND-sidan läses nu in korrekt i Universal Editor och JavaScript-biblioteket läses in för att ansluta redigeraren till din app.

Du har dock troligen lagt märke till att du inte kan interagera med sidan i Universalläsaren. Universal Editor kan inte redigera sidan. För att den universella redigeraren ska kunna redigera innehållet måste du definiera en anslutning så att den vet var innehållet ska skrivas. För lokal utveckling måste du skriva tillbaka till din lokala AEM på https://localhost:8443.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Redigera filen customheaderlibs.html under /apps/wknd/components/page.

    Redigera filen customheaderlibs.html

  3. Lägg till de metadata som krävs för anslutningen till den lokala AEM i slutet av filen.

    code language-html 
    <meta name="urn:adobe:aue:system:aem" content="aem:https://localhost:8443">

  4. Lägg till de metadata som behövs för anslutningen till den lokala Universal Editor-tjänsten i slutet av filen.

    code language-html 
    <meta name="urn:adobe:aue:config:service" content="https://localhost:8000">

  5. Klicka på Spara alla och läs sedan in den universella redigeraren igen.

Nu kan den universella redigeraren inte bara läsa in ditt innehåll från den lokala AEM utvecklingsinstansen, utan även veta var de ändringar du gör med den lokala universella redigeringstjänsten ska sparas. Det här är det första steget när du ska göra ditt program redigerbart med den universella redigeraren.

TIP

Instrumenting Components instrumenting-components

Men du märker antagligen att du fortfarande inte kan göra så mycket med den universella redigeraren. Om du försöker klicka på lagret högst upp på WKND-sidan i Universalläsaren kan du inte markera det (eller något annat på sidan).

Komponenterna måste också vara instrumenterade för att kunna redigeras med den universella redigeraren. Om du vill göra det måste du redigera teaserkomponenten. Därför måste du täcka över kärnkomponenterna eftersom kärnkomponenterna är under /libs, som inte kan ändras.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Markera noden /libs/core/wcm/components och klicka på Överläggsnod i verktygsfältet.

  3. Med /apps/ markerat som plats för övertäckning klickar du på OK.

    Täck över lagret

  4. Markera noden teaser under /libs/core/wcm/components och klicka på Kopiera i verktygsfältet.

  5. Markera den överlappande noden på /apps/core/wcm/components och klicka på Klistra in i verktygsfältet.

  6. Dubbelklicka på filen /apps/core/wcm/components/teaser/v2/teaser/teaser.html för att redigera den.

    Redigera filen teaser.html

  7. Lägg till instrumenteringsinformation för komponenten i slutet av den första div på ungefär rad 26.

    code language-text 
    data-aue-resource="urn:aem:${resource.path}"
data-aue-type="component"
data-aue-label="Teaser"

  8. Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.

  9. Klicka på teaserkomponenten överst på sidan i Universalläsaren och se att du nu kan markera den.

  10. Om du klickar på ikonen Innehållsträd i egenskapsfältet i Universal Editor kan du se att redigeraren känner igen alla scener på sidan nu när du har instrumenterat den. Det lager du valde är det som är markerat.

    Markera den instrumenterade teaserkomponenten

TIP
Mer information om att täcka över noder finns i dokumentet Använda sammanslagningen av delningsresurser i Adobe Experience Manager as a Cloud Service.

Teaser-underkomponenterna för instrument subcomponents

Nu kan du markera suddgummit, men fortfarande inte redigera det. Detta beror på att teaser är en sammansättning av olika komponenter som bild- och titelkomponenten. Du måste mäta dessa underkomponenter för att kunna redigera dem.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Markera noden /apps/core/wcm/components/teaser/v2/teaser/ och dubbelklicka på filen title.html.

    Redigera filen title.html

  3. Infoga följande egenskaper i slutet av taggen h2 (nära rad 17).

    code language-text 
    data-aue-prop="jcr:title"
data-aue-type="text"
data-aue-label="Title"

  4. Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.

  5. Klicka på titeln för samma teaser-komponent överst på sidan och se att du nu kan markera den. Innehållsträdet visar också titeln som en del av den valda teaserkomponenten.

    Välj en titel i lagret

Nu kan du redigera teaserkomponentens titel!

Vad betyder allt det? what-does-it-mean

Nu när du kan redigera teaser titel ska vi titta på vad du har gjort och hur.

Du har identifierat teaser-komponenten för Universal Editor genom att instrumentera den.

  • data-aue-resource identifierar resursen i AEM som redigeras.
  • data-aue-type definierar att objekten ska behandlas som en sidkomponent (till skillnad från en behållare).
  • data-aue-label visar en användarvänlig etikett i användargränssnittet för det valda lagret.

Du har även instrumenterat titelkomponenten i teaserkomponenten.

  • data-aue-prop är JCR-attributet som är skrivet.
  • data-aue-type är så attributet ska redigeras. I det här fallet med textredigeraren eftersom det är en titel (till skillnad från RTF-redigeraren).

Definiera autentiseringsrubriker auth-header

Nu kan du redigera titeln på teaser in-line och ändringarna sparas i webbläsaren.

Redigerad titel på teaser

Om du läser in webbläsaren igen läses den tidigare titeln in igen. Detta beror på att även om den universella redigeraren kan ansluta till din AEM kan redigeraren ännu inte autentisera till din AEM för att skriva tillbaka ändringar i JCR.

Om du visar nätverksfliken för webbläsarutvecklarverktygen och söker efter update, kan du se att det uppstår ett 401-fel när du försöker redigera titeln.

Fel vid försök att redigera titeln

När du använder Universal Editor för att redigera AEM produktionsinnehåll används samma IMS-token som du använde för att logga in på redigeraren för att autentisera AEM för att underlätta återskrivningen till JCR.

När du utvecklar lokalt kan du inte använda AEM identitetsleverantör eftersom IMS-tokens bara skickas till domäner som ägs av Adobe. Du måste manuellt ange ett sätt att autentisera genom att explicit ange en autentiseringshuvud.

  1. Klicka på ikonen Autentiseringshuvuden i verktygsfältet i det universella redigeringsgränssnittet.

  2. Kopiera den autentiseringsrubrik som krävs för att autentisera den lokala AEM och klicka på Spara.

    Konfigurerar autentiseringsrubriker

  3. Läs in den universella redigeraren igen och redigera nu teaser titel.

Det finns inte längre några fel rapporterade i webbläsarkonsolen och ändringarna sparas sedan i den lokala AEM.

Om du undersöker trafiken i webbläsarens utvecklingsverktyg och letar efter händelserna update kan du se uppdateringens detaljer.

Teaser title har redigerats 

{
  "connections": [
    {
      "name": "aem",
      "protocol": "aem",
      "uri": "https://localhost:8443"
    }
  ],
  "target": {
    "resource": "urn:aem:/content/wknd/language-masters/en/jcr:content/root/container/carousel/item_1571954853062",
    "type": "text",
    "prop": "jcr:title"
  },
  "value": "Tiny Toon Adventures"
}
  • connections är anslutningen till din lokala AEM
  • target är den exakta noden och de egenskaper som uppdateras i JCR
  • value är den uppdatering du har gjort.

Du kan se ändringen som finns kvar i JCR.

Uppdatera i JCR

TIP
Det finns många verktyg tillgängliga online för att generera nödvändiga autentiseringshuvuden för dina test- och utvecklingssyften.
Det grundläggande exemplet Basic YWRtaW46YWRtaW4= för autentiseringshuvudet är för kombinationen av användare/lösenord för admin:admin, vilket är vanligt vid lokal AEM.

Instrumentera appen för Properties Rail properties-rail

Du har nu ett program som är instrumenterat för att kunna redigeras med Universal Editor!

Redigeringen är för närvarande begränsad till redigering av teaserns titel. Det finns dock tillfällen när redigering på plats inte räcker. Text som t.ex. teaserns titel kan redigeras där den finns med tangentbordsinmatning. Men mer komplicerade objekt måste kunna visas och tillåta redigering av strukturerade data som skiljer sig från hur de återges i webbläsaren. Det här är egenskaperna som är avsedda för.

Om du vill uppdatera appen så att den använder egenskapsfältet för redigering går du tillbaka till sidhuvudsfilen för sidkomponenten i appen. Här har du redan upprättat anslutningarna till den lokala AEM-utvecklingsinstansen och den lokala universella redigeringstjänsten. Här måste du definiera de komponenter som är redigerbara i programmet och deras datamodeller.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Redigera filen customheaderlibs.html under /apps/wknd/components/page.

    Redigera filen customheaderlibs.html

  3. Till slutet av filen lägger du till det skript som behövs för att definiera komponenterna.

    code language-html 
    <script type="application/vnd.adobe.aue.component+json">
{
  "groups": [
    {
      "title": "General Components",
      "id": "general",
      "components": [
        {
          "title": "Teaser",
          "id": "teaser",
          "plugins": {
            "aem": {
              "page": {
                "resourceType": "wknd/components/teaser"
              }
            }
          }
        },
        {
          "title": "Title",
          "id": "title",
          "plugins": {
            "aem": {
              "page": {
                "resourceType": "wknd/components/title"
              }
            }
          }
        }
      ]
    }
  ]
}
</script>

  4. Under det lägger du till det skript som behövs för att definiera modellen i slutet av filen.

    code language-html 
    <script type="application/vnd.adobe.aue.model+json">
[
  {
    "id": "teaser",
    "fields": [
      {
        "component": "text-input",
        "name": "jcr:title",
        "label": "Title",
        "valueType": "string"
      },
      {
        "component": "text-area",
        "name": "jcr:description",
        "label": "Description",
        "valueType": "string"
      }
    ]
  },
  {
    "id": "title",
    "fields": [
      {
        "component": "select",
        "name": "type",
        "value": "h1",
        "label": "Type",
        "valueType": "string",
        "options": [
          { "name": "h1", "value": "h1" },
          { "name": "h2", "value": "h2" },
          { "name": "h3", "value": "h3" },
          { "name": "h4", "value": "h4" },
          { "name": "h5", "value": "h5" },
          { "name": "h6", "value": "h6" }
        ]
      }
    ]
  }
]
</script>

  5. Klicka på Spara alla i verktygsfältet.

Vad betyder allt det? what-does-it-mean-2

För att kunna redigeras med egenskapsfältet måste komponenterna tilldelas till groups, så varje definition börjar som en lista med grupper som innehåller komponenterna.

  • title är namnet på gruppen.
  • id är gruppens unika identifierare, i det här fallet allmänna komponenter som utgör sidinnehållet i motsats till avancerade komponenter för sidlayout, till exempel.

Varje grupp har sedan en matris på components.

  • title är namnet på komponenten.
  • id är den unika identifieraren för komponenten, i det här fallet en teaser.

Varje komponent har sedan en plugin-definition som definierar hur komponenten mappas till AEM.

  • aem är det plugin-program som hanterar redigeringen. Detta kan ses som den tjänst som bearbetar komponenten.
  • page definierar vilken typ av komponent det är, i det här fallet en standardsidkomponent.
  • resourceType är mappningen till den faktiska AEM.

Varje komponent måste sedan mappas till en model för att definiera de enskilda redigerbara fälten.

  • id är modellens unika identifierare, som måste matcha komponentens ID.
  • fields är en array med de enskilda fälten.
  • component är den typ av indata som t.ex. text eller textområde.
  • name är fältnamnet i den JCR som fältet mappas till.
  • label är beskrivningen av fältet som visas i redigerarens användargränssnitt.
  • valueType är datatypen.

Instrumentera komponenten för egenskapsjärnvägen properties-rail-component

Du måste också definiera på komponentnivå vilken modell komponenten ska använda.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Dubbelklicka på filen /apps/core/wcm/components/teaser/v2/teaser/teaser.html för att redigera den.

    Redigera filen teaser.html

  3. I slutet av den första div på ungefär rad 32, efter de egenskaper du lade till tidigare, lägger du till instrumenteringsinformation för modellen som den teaserkomponenten ska använda.

    code language-text 
    data-aue-model="teaser"

  4. Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.

Nu är du redo att testa egenskaperna för den räl som är instrumenterad för komponenten.

  1. Klicka en gång till på teaser i Universal Editor för att redigera den.

  2. Klicka på egenskapsfältet för att visa egenskapsfliken och visa fälten som du just instrumenterat.

    Rälen för instrumenterade egenskaper

Nu kan du redigera lagrets titel antingen direkt som du gjorde tidigare eller i egenskapsfältet. I båda fallen sparas ändringarna i den lokala AEM.

Lägg till ytterligare fält i egenskapsfältet add-fields

Med hjälp av den grundläggande strukturen i datamodellen för komponenten som du redan har implementerat kan du lägga till ytterligare fält enligt samma modell.

Du kan till exempel lägga till ett fält för att justera komponentens format.

  1. Öppna CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Redigera filen customheaderlibs.html under /apps/wknd/components/page.

    Redigera filen customheaderlibs.html

  3. Lägg till ytterligare ett objekt i fields-arrayen för formatfältet i modelldefinitionsskriptet. Kom ihåg att lägga till ett kommatecken efter det sista fältet innan du infogar det nya.

    code language-json 
    {
   "component": "select",
   "name": "cq:styleIds",
   "label": "Style",
   "valueType": "string",
     "multi": true,
   "options": [
     {"name": "hero", "value":"1555543212672"},
     {"name": "card", "value":"1605057868937"}
   ]
}

  4. Klicka på Spara alla i verktygsfältet och läs in den universella redigeraren igen.

  5. Klicka en gång till på teaserns titel för att redigera den.

  6. Klicka på egenskapsfältet och se att det finns ett nytt fält för att justera komponentens format.

    De instrumenterade egenskaperna flödar med formatfältet

Alla fält i JCR för komponenten kan visas på det här sättet i Universal Editor.

Sammanfattning summary

Grattis! Nu kan du instrumentera dina egna AEM program så att de fungerar tillsammans med den universella redigeraren.

När du börjar instrumentera ditt eget program bör du tänka på de grundläggande steg du utförde i det här exemplet.

  1. Du konfigurerar utvecklingsmiljön.

    • AEM körs lokalt på HTTPS med WKND installerat
    • Universell redigeringstjänst som körs lokalt på HTTPS

  2. Du har AEM OSGi-inställningarna så att innehållet kan läsas in på fjärrbasis.

  3. Du har lagt till

  4. Du har definierat en anslutning för att behålla ändringarna i

    • Du definierade en anslutning till den lokala AEM utvecklingsinstansen.
    • Du har även definierat en anslutning till den lokala tjänsten Universal Editor.

  5. Du instrumenterade teaserkomponenten.

  6. Du instrumenterade underkomponenterna i teaser.

  7. Du har definierat ett anpassat autentiseringshuvud så att du kan spara ändringar med den lokala tjänsten Universal Editor.

  8. Du instrumenterade programmet för att använda egenskapsspåret.

  9. Du instrumenterade teaser-komponenten för att använda egenskapsspåret.

Du kan följa dessa steg för att mäta hur din egen app kan användas med den universella redigeraren. Alla egenskaper i JCR kan visas för den universella redigeraren.

Ytterligare resurser additional-resources

Titta på följande dokument för mer information om funktionerna i den universella redigeraren.

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