Scopri come accedere all’editor universale e come iniziare a preparare la tua prima app AEM per utilizzarla.
Se preferisci approfondire direttamente un esempio, puoi rivedere l’app di esempio dell’editor universale su GitHub.
Anche se l’editor universale può modificare il contenuto da qualsiasi origine, questo documento utilizza un’app AEM come esempio.
Puoi eseguire diversi passaggi per onboarding dell’app AEM e strumentazione per l’utilizzo dell’editor universale.
Questo documento ti guiderà attraverso questi passaggi.
Innanzitutto, è necessario richiedere l’accesso all’editor universale. Vai all’indirizzo https://experience.adobe.com/#/aem/editor, accedi e verifica se hai accesso all’editor universale.
Se non hai accesso, puoi richiederlo tramite un modulo collegato sulla stessa pagina.
Fai clic su Richiesta di accesso e compila il modulo come indicato per richiedere l’accesso. Un rappresentante Adobe esaminerà la tua richiesta e ti contatterà per discutere del tuo caso d’uso.
Prima che l’app possa essere instrumentata per l’utilizzo con l’editor universale, deve includere la seguente dipendenza.
@adobe/universal-editor-cors
Per attivare la strumentazione, è necessario aggiungere la seguente importazione alla index.js
.
import "@adobe/universal-editor-cors";
Se non stai implementando un’app React e/o hai bisogno di eseguire il rendering lato server, un metodo alternativo consiste nell’includere quanto segue nel corpo del documento.
<script src="https://cdn.jsdelivr.net/gh/adobe/universal-editor-cors/dist/universal-editor-embedded.js" async></script>
Per poter modificare il contenuto di AEM con l’app utilizzando l’editor universale, le impostazioni CORS e cookie devono essere eseguiti in AEM.
Le seguenti configurazioni OSGi devono essere impostate sull’istanza di authoring di AEM.
SameSite Cookies = None
in com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
org.apache.sling.engine.impl.SlingMainServlet
Il cookie del token di accesso deve essere inviato ad AEM come dominio di terze parti. Pertanto, il cookie dello stesso sito deve essere impostato esplicitamente su None
.
Questa proprietà deve essere impostata nella configurazione OSGi com.day.crx.security.token.impl.impl.TokenAuthenticationHandler
.
<?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 impedisce il rendering di pagine AEM all’interno di un iframe. La rimozione dell’intestazione consente di caricare le pagine.
Questa proprietà deve essere impostata nella configurazione OSGi org.apache.sling.engine.impl.SlingMainServlet
.
<?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]"/>
Il servizio di editor universale richiede un nome risorsa uniforme (URN) per identificare e utilizzare il sistema back-end corretto per il contenuto dell’app in fase di modifica. Pertanto, è necessario uno schema URN per mappare il contenuto alle risorse di contenuto.
Gli attributi di strumentazione aggiunti alla pagina sono costituiti principalmente da Microdati HTML, uno standard di settore che può essere utilizzato anche per rendere HTML più semantico, rendere i documenti HTML indicizzabili e così via.
Le connessioni utilizzate nell’app vengono memorizzate come <meta>
tag nella pagina <head>
.
<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">
<category>
- Questa è una classificazione della connessione con due opzioni.
system
- Per endpoint di connessioneconfig
- Per definizione delle impostazioni di configurazione facoltative<referenceName>
: questo è un nome breve che viene utilizzato nuovamente nel documento per identificare la connessione. Ad esempio, aemconnection
.<protocol>
: indica il plug-in di persistenza del servizio di persistenza dell’editor universale da utilizzare. Ad esempio, aem
<url>
: questo è l’URL del sistema in cui le modifiche devono essere mantenute. Ad esempio, http://localhost:4502
L’identificatore urn:adobe:aue:system
rappresenta la connessione per Adobe Universal Editor.
Negli identificatori itemid
verrà utilizzato il prefisso urn
per accorciare l’identificatore.
itemid="urn:<referenceName>:<resource>"
<referenceName>
: questo è il riferimento menzionato nel tag <meta>
. Ad esempio, aemconnection
.<resource>
: questo è un puntatore verso la risorsa nel sistema di destinazione. Ad esempio, un percorso di contenuto AEM come /content/page/jcr:content
Per ulteriori dettagli sugli attributi e i tipi di dati richiesti dall’editor universale, consulta Attributi e tipi.
<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>
È possibile utilizzare config
Prefisso nell’URN della connessione per impostare gli endpoint del servizio e dell’estensione, se necessario.
Se non desideri utilizzare il servizio Universal Editor, ospitato da Adobe, ma la tua versione ospitata, puoi impostarlo in un tag meta. Per sovrascrivere l'endpoint di servizio predefinito fornito da Universal Editor, impostare un endpoint di servizio personalizzato:
urn:adobe:aue:config:service
content="https://adobe.com"
(esempio)<meta name="urn:adobe:aue:config:service" content="<url>">
Se desideri abilitare solo alcune estensioni per una pagina, puoi impostarle in un tag meta. Per recuperare le estensioni, imposta gli endpoint dell'estensione:
urn:adobe:aue:config:extensions
content="https://adobe.com,https://anotherone.com,https://onemore.com"
(esempio)<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">
L’app è ora preparata per l’utilizzo dell’editor universale.
Consulta Authoring dei contenuti con l’editor universale per scoprire quanto è semplice e intuitivo per gli autori creare contenuti utilizzando l’editor universale.
Per ulteriori informazioni sull’editor universale, consulta questi documenti.