L’editor universale universal-editor

Scopri la flessibilità di Universal Editor e come può aiutare a potenziare le tue 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 possono trarre vantaggio dalla flessibilità di Universal Editor in quanto supporta lo stesso editing visivo coerente per tutte le forme di contenuti AEM headless.
  • 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 in parallelo con AEM per creare contenuti senza problemi.

  • 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 dell’AEM.
  • Il servizio Universal Editor, che viene eseguito sullo stesso host di Dispatcher, riscrive le modifiche nell'istanza di authoring AEM.

Flusso di authoring con Universal Editor

Configurazione setup

Per testare l’Editor universale è necessario:

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

Aggiorna AEM update-aem

Per poter utilizzare l’editor universale con AEM 6.5 sono necessari i Service Pack 21 o 22 e un feature pack per l’AEM.

Applica Service Pack più recente latest

Assicurati di eseguire almeno il service pack 21 o 22 per AEM 6.5. È possibile scaricare il service pack più recente da Software Distribution.

Installazione del Feature Pack di Universal Editor feature-pack

Installa Universal Editor Feature Pack per AEM 6.5 disponibile in Software Distribution.

Se è già in esecuzione il service pack 23 o versione successiva, il feature pack non è necessario.

Configura servizi configure-services

Il feature pack installa una serie di nuovi pacchetti per i quali è necessaria una configurazione aggiuntiva.

  1. Apri Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Individua il gestore di autenticazione token Adobe Granite 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 Adobe Granite. query-parameter

  1. Apri Configuration Manager.
    • http://<host>:<port>/system/console/configMgr
  2. Individua il gestore di autenticazione dei parametri di query 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.

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.

AEM aprirà l’Editor universale per le pagine basate su questa configurazione.

  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, l'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 nell'istanza di creazione AEM:

    • /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, è possibile impostare un servizio Universal Editor locale per lo sviluppo e il testing 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 l'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 l’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 gli sviluppatori di 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