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 ett antal 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 dessa steg.
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.
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 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";
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 osv.
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.
itemid
s 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
Se dokumentet Attribut och typer om du vill ha mer information om de dataattribut och datatyper som krävs för den universella redigeraren.
<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>
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.
Mer information om Universal Editor finns i de här dokumenten.