DocumentazioneAEM as a Cloud ServiceGuida utente

Guida introduttiva all’editor universale in AEM getting-started

Last update: Wed Feb 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Amministratore
  • Sviluppatore

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

TIP
Se preferisci immergerti direttamente in 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 utilizzerà come esempio un’app AEM. Questo documento ti guiderà attraverso questi passaggi.

Prepara la pagina instrument-page

Per eseguire il rendering e la modifica della pagina nell’editor universale è necessaria una libreria JavaScript.

Il servizio Universal Editor richiede inoltre un URN per identificare e utilizzare il sistema di back-end corretto per il contenuto dell'app da modificare.Pertanto, è necessario uno schema URN per mappare il contenuto alle risorse di contenuto.

Includi la libreria CORS di Universal Editor cors-library

Per consentire all'editor universale di connettersi all'app, l'app deve includere la libreria CORS dell'editor universale. Aggiungi il seguente script all’app.

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

Creazione di connessioni connections

Le connessioni utilizzate nell’app vengono memorizzate come <meta> tag nella pagina <head>.

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">

  • <category> - Classificazione della connessione con due opzioni.

  • <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 data-aue-resource verrà utilizzato il prefisso urn per accorciare l’identificatore.

data-aue-resource="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
TIP
Per ulteriori dettagli sugli attributi e i tipi di dati richiesti dall’editor universale, consulta Attributi e tipi.

Connessione di esempio 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>

Impostazioni di configurazione configuration-settings

È possibile utilizzare il prefisso config 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
  • Meta content - 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
  • Contenuto metadati: content="https://adobe.com,https://anotherone.com,https://onemore.com" (esempio)
<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Definisci per quali percorsi di contenuto o sling:resourceType s deve essere aperto l’Editor universale. (Opzionale) content-paths

Se disponi di un progetto AEM esistente che utilizza l'editor di pagine, quando gli autori di contenuto modificano le pagine, queste vengono aperte automaticamente con l'editor di pagine. Puoi definire quale editor AEM aprire in base ai percorsi dei contenuti o a sling:resourceType, semplificando così l'esperienza per gli autori, indipendentemente dall'editor richiesto per il contenuto selezionato.

  1. Per sfruttare questa funzione di configurazione, contatta l’Assistenza clienti di Adobe per attivare l’accesso al servizio URL dell’editor universale per il tuo programma.

  2. Una volta che l’Assistenza clienti ha attivato l’accesso al servizio URL dell’editor universale, apri Configuration Manager.

    http://<host>:<port>/system/console/configMgr

  3. Individua Servizio URL editor universale nell'elenco e fai clic su Modifica i valori di configurazione.

  4. Definisci per quali percorsi di contenuto o sling:resourceType s deve essere aperto l’Editor universale.

    • Nel campo Mapping apertura editor universale, specificare i percorsi per i quali è aperto l'editor universale.
    • Nel campo Sling:resourceTypes che deve essere aperto da Universal Editor, fornire un elenco delle risorse aperte direttamente da Universal Editor.

  5. Fai clic su Salva.

  6. Controlla la configurazione di Externalizer e assicurati di disporre almeno degli ambienti locale, di authoring e di pubblicazione impostati come nell'esempio seguente.

    code language-text 
    "local $[env:AEM_EXTERNALIZER_LOCAL;default=http://localhost:4502]",
"author $[env:AEM_EXTERNALIZER_AUTHOR;default=http://localhost:4502]",
"publish $[env:AEM_EXTERNALIZER_PUBLISH;default=http://localhost:4503]"

Una volta completati questi passaggi di configurazione, AEM aprirà l’Editor universale per le pagine nell’ordine seguente.

  1. AEM controllerà le mappature in Universal Editor Opening Mapping e se il contenuto si trova in uno dei percorsi qui definiti, verrà aperto l'Editor universale.
  2. Per il contenuto non incluso nei percorsi definiti in Universal Editor Opening Mapping, AEM controlla se il resourceType del contenuto corrisponde a quelli definiti in Sling:resourceTypes che verranno aperti da Universal Editor e se il contenuto corrisponde a uno di questi tipi, l'Editor universale verrà aperto in ${author}${path}.html.
  3. In caso contrario, AEM apre l’Editor pagina.

Per definire le mappature nel campo Mappatura di apertura dell'editor universale sono disponibili le seguenti variabili.

  • path: percorso del contenuto della risorsa da aprire
  • localhost: voce esternalizzatore per localhost senza schema, ad esempio localhost:4502
  • author: voce esternalizzazione per autore senza schema, ad esempio localhost:4502
  • publish: voce esternalizzatore per la pubblicazione senza schema, ad esempio localhost:4503
  • preview: voce esternalizzatore per l'anteprima senza schema, ad esempio localhost:4504
  • env: prod, stage, dev in base alle modalità di esecuzione Sling definite
  • token: token di query richiesto per QueryTokenAuthenticationHandler

Mappature di esempio example-mappings

  • Apri tutte le pagine in /content/foo in AEM Author:

    • /content/foo:${author}${path}.html?login-token=${token}
    • Ciò comporta l'apertura di https://localhost:4502/content/foo/x.html?login-token=<token>

  • Apri tutte le pagine in /content/bar su un server NextJS remoto, fornendo come informazioni tutte le variabili:

    • /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
    • Ciò comporta l'apertura di https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

Iniziare a utilizzare l’editor universale youre-ready

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

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

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab