DocumentazioneAEM 6.5Guida utente

L’editor universale universal-editor

Last update: Tue Jun 10 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager 6.5

Creato per:

  • Sviluppatore

Scopri la flessibilità di Universal Editor e come può aiutare a potenziare le esperienze headless utilizzando AEM 6.5.

Panoramica overview

Universal Editor è un editor visivo versatile che fa parte di Adobe Experience Manager Sites. Consente agli autori di modificare ciò che si vede è ciò che si ottiene (WYSIWYG) di qualsiasi esperienza headless.

  • Gli autori traggono vantaggio dalla flessibilità di Universal Editor in quanto supporta lo stesso editing visivo coerente per tutte le forme di contenuti headless AEM.
  • Gli sviluppatori traggono vantaggio dalla versatilità di Universal Editor in quanto supporta anche 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 ulteriori informazioni, vedere la documentazione di AEM as a Cloud Service nell'editor universale.

Architettura architecture

Universal Editor è 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 a rendering da AEM 6.5.
  • La pagina AEM viene letta dall’editor universale tramite Dispatcher dall’istanza di authoring di AEM.
  • Il servizio Universal Editor, che viene eseguito sullo stesso host di Dispatcher, riscrive le modifiche nell'istanza di authoring di AEM.

Flusso di authoring con Universal Editor

Requisiti requirements

L’editor universale è supportato da:

Questo documento si concentra sul supporto di AEM 6.5 di Universal Editor. Per utilizzare l’Editor universale con AEM 6.5, è necessario:

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

Configurazione setup

Per testare l’Editor universale è necessario:

  1. Configurare un servizio Universal Editor locale.
  2. Regola il dispatcher per consentire il servizio Universal Editor.

Dopo aver completato la configurazione, puoi dotare le applicazioni dell'editor universale.

Configura 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 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 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 Apache Sling Main Servlet nell'elenco e fai clic su Modifica i valori di configurazione.
  3. Eliminare 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 Adobe Granite Query Parameter Authentication Handler 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.

Definire 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. Definire i percorsi di contenuto o sling:resourceTypes per cui aprire 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.

  4. Fai clic su Salva.

  5. 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 in Universal Editor Opening Mapping 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

Esempi di mappature:

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

Configurazione del servizio Editor universale set-up-ue

Con AEM aggiornato e configurato, puoi impostare un servizio Universal Editor locale per le attività di sviluppo e test locali.

  1. Installa Node.js versione >=20.

  2. Scarica e decomprimi il servizio Universal Editor più recente da Distribuzione software

  3. Configurare il servizio Universal Editor tramite variabili di ambiente o file .env.

  4. Esegui universal-editor-service.cjs

Aggiornare Dispatcher update-dispatcher

Se AEM è configurato e un servizio Universal Editor locale è in esecuzione, sarà necessario consentire un proxy inverso per il nuovo servizio nel dispatcher.

  1. Regola 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
    8080 è la porta predefinita. Se hai modificato questo usando il parametro UES_PORT in il tuo file .env, devi regolare di conseguenza il valore della porta qui.

  2. Riavvia Apache.

Strumentazione dell’app instrumentation

Con AEM aggiornato e un servizio Universal Editor locale in esecuzione, puoi iniziare a modificare contenuti headless utilizzando Universal Editor.

Tuttavia, l’app deve essere dotata di strumenti che consentano di sfruttare i vantaggi dell’editor universale. Ciò comporta l’inclusione di metatag per indicare all’editor come e dove mantenere il contenuto. I dettagli di questa strumentazione sono disponibili nella documentazione dell'editor universale per AEM as a Cloud Service.

Quando si segue la documentazione di Universal Editor con AEM as a Cloud Service, vengono applicate le seguenti modifiche quando si utilizza 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 Universal Editor 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 Universal Editor, consulta il documento Panoramica di Universal Editor per sviluppatori AEM nella documentazione di AEM as a Cloud Service, tenendo presente le modifiche necessarie per il supporto di AEM 6.5 come indicato 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. Ci sono, tuttavia, delle differenze da notare.

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