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.
Om du hellre vill dyka rakt in i ett exempel kan du läsa Universal Editor Sample App 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 finns flera steg för att komma igång med AEM och instrumentera den så att den kan använda den universella redigeraren.
Det här dokumentet vägleder dig genom de här stegen.
Du måste först begära åtkomst till Universal Editor. Se https://experience.adobe.com/#/aem/editor, logga in och validera om du har tillgång till Universell redigerare.
Om du inte har åtkomst kan du begära det via ett formulär som är länkat på samma sida.
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.
Innan ditt program kan instrumenteras för användning med den universella redigeraren måste det innehålla följande beroende.
@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";
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>
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
org.apache.sling.engine.impl.SlingMainServlet
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" />
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]"/>
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 och så vidare.
Anslutningar som används i appen lagras som <meta>
taggar på 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 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 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
Identifierare urn:adobe:aue:system
representerar anslutningen för Adobe Universal Editor.
itemid
s använder 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
Se dokumentet Attribut och typer om du vill ha mer information om de dataattribut och datatyper som krävs för den universella redigeraren.
<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 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 kan använda config
i anslutningens URN för att ange service- 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:
urn:adobe:aue:config:service
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:
urn:adobe:aue:config:extensions
content="https://adobe.com,https://anotherone.com,https://onemore.com"
(exempel)<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">
Din app är nu instrumenterad för att använda den universella redigeraren!
Se 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.
Mer information om Universal Editor finns i de här dokumenten.