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.
Ä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.system
- För anslutningsslutpunkterconfig
- För att definiera valfria konfigurationsinställningar
-
<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
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.
-
Öppna Configuration Manager.
http://<host>:<port>/system/console/configMgr
-
Leta reda på URL-tjänsten för den universella redigeraren i listan och klicka på Redigera konfigurationsvärdena.
-
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.
-
Klicka på Spara.
AEM kommer att öppna Universal Editor för sidor som baseras på den här konfigurationen i följande ordning.
- 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. - För innehåll som inte finns under sökvägar som definieras i
Universal Editor Opening Mapping
kontrollerar AEM omresourceType
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
. - 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 öppnaslocalhost
: Post för externalisering förlocalhost
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 Slingtoken
: Frågetoken krävs förQueryTokenAuthenticationHandler
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.
- Introduktion till universell redigering - Lär dig hur den universella redigeraren kan redigera alla delar av innehåll i alla implementeringar så att du kan leverera enastående upplevelser, öka innehållets hastighet och skapa en toppmodern utvecklarupplevelse.
- Skapa innehåll med den universella redigeraren - Lär dig hur enkelt och intuitivt det är för innehållsförfattare att skapa innehåll med den universella redigeraren.
- Publicera innehåll med den universella redigeraren - Lär dig hur den universella redigeraren publicerar innehåll och hur dina appar kan hantera det publicerade innehållet.
- Universell redigeringsarkitektur - Lär dig mer om arkitekturen för den universella redigeraren och hur data flödar mellan dess tjänster och lager.
- Attribut och typer - Lär dig mer om de dataattribut och datatyper som krävs för den universella redigeraren.
- Autentisering av universell redigerare - Lär dig hur den universella redigeraren autentiseras.