Guida introduttiva all’editor universale in AEM

Scopri come accedere all’editor universale e come iniziare a preparare la tua prima app AEM per utilizzarla.

Passaggi di onboarding

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.

1. Richiedi l’accesso all’editor universale.
2. Includi la libreria principale dell’editor universale.
3. Aggiungi la configurazione OSGi necessaria.
4. Prepara la pagina.

Questo documento ti guiderà attraverso questi passaggi.

Richiedi l’accesso all’editor universale

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.

Includi la libreria principale dell’editor universale

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";

Alternativa per le app non React

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>

Aggiungi le configurazioni OSGi necessarie

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
• Rimuovi X-FRAME-OPTIONS: intestazione SAMEORIGIN in org.apache.sling.engine.impl.SlingMainServlet

com.day.crx.security.token.impl.impl.TokenAuthenticationHandler

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" />

org.apache.sling.engine.impl.SlingMainServlet

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]"/>

Prepara la pagina

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.

Creazione di connessioni

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 connessione
  • config - 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

Connessione di esempio

<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>

Impostazioni di configurazione

È 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:

• Nome metadati - urn:adobe:aue:config:service
• Metadati - 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:

• Nome metadati: urn:adobe:aue:config:extensions
• Metadati: content="https://adobe.com,https://anotherone.com,https://onemore.com" (esempio)

<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Iniziare a utilizzare l’editor universale

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.

Risorse aggiuntive

Per ulteriori informazioni sull’editor universale, consulta questi documenti.

• Introduzione all’editor universale: scopri come l’editor universale consente di modificare ogni aspetto di qualsiasi contenuto in qualsiasi implementazione per fornire esperienze eccezionali, velocizzare la preparazione dei contenuti e fornire un’esperienza di sviluppo all’avanguardia.
• Authoring dei contenuti con l’editor universale: scopri quanto è semplice e intuitivo per gli autori di contenuto creare contenuto utilizzando l’editor universale.
• Pubblicazione di contenuti con l’editor universale - Scopri come l’Editor universale pubblica i contenuti e come le app possono gestire i contenuti pubblicati.
• Architettura dell’editor universale: scopri l’architettura dell’editor universale e come avviene il flusso di dati tra i suoi servizi e livelli.
• Attributi e tipi: scopri gli attributi e i tipi di dati richiesti dall’editor universale.
• Autenticazione dell’editor universale: scopri come l’editor universale effettua l’autenticazione.