DocumentazioneAEM 6.5Guida utente

L’editor universale universal-editor

Last update: Thu Sep 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager 6.5

Creato per:

  • Sviluppatore

Scopri la flessibilità dell’editor universale e come può aiutare a potenziare le esperienze headless utilizzando AEM 6.5.

Panoramica overview

L’editor universale è un editor visivo versatile che fa parte di Adobe Experience Manager Sites. Consente ai creatori di contenuti di modificare gli elementi di WYSIWYG (what-you-see-is-what-you-get) di qualsiasi esperienza headless.

  • Gli autori traggono vantaggio dalla flessibilità dell’editor universale in quanto supporta le stesse modifiche visive coerenti per tutte le forme di contenuti headless AEM.
  • Gli sviluppatori traggono vantaggio dalla versatilità dell’editor universale, che supporta un vero e proprio disaccoppiamento dell’implementazione. Consente agli sviluppatori di utilizzare virtualmente qualsiasi framework o architettura a loro scelta, senza imporre alcun vincolo di SDK o tecnologia.

Per maggiori dettagli, consulta la documentazione di AEM as a Cloud Service nell'editor universale.

Architettura architecture

L’editor universale è un servizio che funziona insieme ad AEM per creare contenuti in modo headless.

  • L'editor universale è ospitato in https://experience.adobe.com/#/aem/editor/canvas e può modificare le pagine sottoposte al rendering da parte di AEM 6.5.
  • La pagina AEM viene letta dall’editor universale tramite Dispatcher partendo dall’istanza di authoring di AEM.
  • Il servizio Editor universale, che viene eseguito sullo stesso host di Dispatcher, riscrive le modifiche nell’istanza di authoring di AEM.

Flusso di creazione di contenuti con l’editor universale

Requisiti requirements

L’editor universale è supportato da:

Questo documento è incentrato sul supporto di AEM 6.5 dell’editor universale. Per utilizzare l’editor universale con AEM 6.5, è necessario avere:

  • AEM 6.5 con service pack 23 o successivo
  • Dispatcher configurato correttamente

Configurazione setup

Per testare l’editor universale è necessario:

  1. Configurare un servizio di editor universale locale.
  2. Modificare Dispatcher per consentire il servizio di editor universale.

Dopo aver completato la configurazione, puoi dotare le applicazioni per l’uso dell’editor universale.

Configurare i servizi configure-services

L’editor universale sfrutta diversi pacchetti per i quali è necessaria una configurazione aggiuntiva.

  1. Apri Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Individua la voce Adobe Granite Token Authentication Handler nell’elenco e fai clic su Modifica i valori di configurazione
  3. Nella finestra di dialogo, modifica l’attributo SameSite per il cookie del token di accesso (token.samesite.cookie.attr) in Partitioned.
  4. Fai clic su Salva.

Rimuovi l’opzione X-Frame delle intestazioni SAMEORIGIN. sameorigin

  1. Apri Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Individua il servlet principale di Apache Sling nell’elenco e fai clic su Modifica i valori di configurazione.
  3. Elimina il valore X-Frame-Options=SAMEORIGIN dall’attributo Altre intestazioni di risposta (sling.additional.response.headers) se esistente.
  4. Fai clic su Salva.

Configura il gestore di autenticazione dei parametri di query di Adobe Granite. query-parameter

  1. Apri Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Individua il Gestore di autenticazione dei parametri di query di Adobe Granite nell’elenco e fai clic su Modifica i valori di configurazione.
  3. Nel campo Percorso (path), aggiungi / per abilitare.
    • Un valore vuoto disattiva il gestore di autenticazione.
  4. Fai clic su Salva.

Definisci i percorsi di contenuto o sling:resourceTypes per cui aprire l’editor universale. paths

  1. Apri Configuration Manager.

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

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

  3. Definisci i percorsi di contenuto o sling:resourceTypes per cui aprire l’editor universale.

    • Nel campo Mappatura apertura editor universale, specifica i percorsi per i quali è aperto l’editor universale.
    • Nel campo Sling:resourceTypes che verrà aperto dall’editor universale, fornisci un elenco di risorse aperte direttamente dall’editor universale.

  4. Fai clic su Salva.

  5. Controlla la configurazione di esternalizzazione e assicurati di disporre quantomeno degli ambienti locali, 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 verifica se il resourceType dei contenuti corrispondono a quelli definiti in Sling:resourceTypes che verranno aperti dall’editor universale; 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 di pagine.

Per definire le mappature sono disponibili le seguenti variabili in Universal Editor Opening Mapping.

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

Esempi di mappature:

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

    • /content/foo:${author}${path}.html?login-token=${token}
    • Questo 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}
    • Questo comporta l’apertura di https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

Configurare il servizio editor universale set-up-ue

Con AEM aggiornato e configurato, puoi impostare un servizio editor universale locale per le attività locali di sviluppo e testing.

  1. Installa Node.js versione >=20.

  2. Scarica e decomprimi il servizio editor universale più recente da Distribuzione del software

  3. Configura il servizio editor universale tramite variabili di ambiente o un file .env.

  4. Eseguire universal-editor-service.cjs

Aggiornare Dispatcher update-dispatcher

Se AEM è configurato ed è in esecuzione un servizio editor universale locale, sarà necessario consentire un proxy inverso per il nuovo servizio in Dispatcher.

  1. Modifica il file vhost dell’istanza di authoring in modo da includere un proxy inverso.

    code language-html 
    <IfModule mod_proxy.c>
 ProxyPass "/universal-editor" "http://localhost:8080"
 ProxyPassReverse "/universal-editor" "http://localhost:8080"
</IfModule>
    note note
    NOTE
    La porta predefinita è 8080. Se hai modificato questo elemento usando il parametro UES_PORT nel tuo file.env, devi modificare di conseguenza il valore della porta qui.

  2. Riavvia Apache.

Dotare di strumenti l’app instrumentation

Con AEM aggiornato e un servizio editor universale locale in esecuzione, puoi iniziare a modificare contenuti headless utilizzando l’editor universale.

L’app deve essere dotata di strumenti che consentano di sfruttare i vantaggi dell’editor universale. Questo comporta l’inclusione di tag meta per indicare all’editor come e dove mantenere il contenuto. I dettagli di questa dotazione di strumenti sono disponibili nella documentazione dell’editor universale per AEM as a Cloud Service.

Nella documentazione dell’editor universale per AEM as a Cloud Service vanno applicate le seguenti modifiche per l’utilizzo con AEM 6.5.

  • Il protocollo nel tag meta deve essere aem65 invece di aem.

    code language-html 
    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>

  • L’endpoint del servizio editor universale deve essere annunciato tramite un tag meta.

    code language-html 
    <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>

  • Nella sezione plugins della definizione dei componenti, è necessario utilizzare aem65 invece di aem.

TIP
Per una guida completa per gli sviluppatori su come iniziare a utilizzare l’editor universale, consulta il documento Panoramica dell’editor universale per gli sviluppatori AEM nella documentazione di AEM as a Cloud Service, tenendo presenti le modifiche necessarie per il supporto di AEM 6.5 indicate in questa sezione.

Differenze tra AEM 6.5 e AEM as a Cloud Service differences

L’editor universale in AEM 6.5 funziona in generale come in AEM as a Cloud Service, inclusa l’interfaccia utente e gran parte della configurazione. Esistono tuttavia differenze da sottolineare.

  • L’editor universale nella versione 6.5 supporta solo il caso d’uso headless.
  • La configurazione dell’editor universale varia leggermente per la versione 6.5 (come descritto nel documento corrente).
  • L’editor universale nella versione 6.5 utilizza un selettore di risorse e un selettore di frammenti di contenuto diversi rispetto a AEM as a Cloud Service.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2