Informazioni sull’editor universale universal-editor
Scopri la flessibilità di Universal Editor e come può aiutare a potenziare le esperienze headless utilizzando AEM 6.5 LTS.
Panoramica overview
L’editor universale è 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. Supporta lo stesso editing visivo coerente 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/canvase può modificare le pagine sottoposte a rendering da AEM 6.5 LTS. - L’editor universale legge la pagina AEM tramite Dispatcher dall’istanza di authoring AEM.
- Il servizio Editor universale, che viene eseguito sullo stesso host di Dispatcher, riscrive le modifiche nell’istanza di authoring di AEM.
Requisiti requirements
Di seguito è riportato il supporto di Universal Editor:
- AEM 6.5 LTS GA
- Sono supportati sia l’hosting on-premise che Adobe Managed Services (AMS).
- AEM 6.5
- Sono supportati sia l’hosting on-premise che AMS.
- AEM as a Cloud Service (versione
2023.8.13099o successiva)
Questo documento si concentra sul supporto AEM 6.5 LTS di Universal Editor. Per utilizzare l’Editor universale con AEM 6.5 LTS, è necessario quanto segue:
- AEM 6.5 LTS GA
- Dispatcher configurato correttamente
Configurazione setup
Per utilizzare l'Editor universale, effettuare le seguenti operazioni:
Dopo aver completato la configurazione, puoi dotare le applicazioni per l’uso dell’editor universale.
Configurare i servizi configure-aem
L’editor universale si basa su una serie di servizi che devono essere configurati.
Imposta l’attributo SameSite per il cookie login-token. samesite-attribute
- Apri Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Individua la voce Adobe Granite Token Authentication Handler nell’elenco e fai clic su Modifica i valori di configurazione
- Nella finestra di dialogo, modifica l’attributo SameSite per il cookie del token di accesso (
token.samesite.cookie.attr) inPartitioned. - Fai clic su Salva.
Rimuovi l’opzione X-Frame delle intestazioni SAMEORIGIN. sameorigin
- Apri Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Individua il servlet principale di Apache Sling nell’elenco e fai clic su Modifica i valori di configurazione.
- Elimina il valore
X-Frame-Options=SAMEORIGINdall’attributo Altre intestazioni di risposta (sling.additional.response.headers) se esistente. - Fai clic su Salva.
Configurare il gestore di autenticazione dei parametri di query di Adobe Granite query-parameter
- Apri Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Individua il Gestore di autenticazione dei parametri di query di Adobe Granite nell’elenco e fai clic su Modifica i valori di configurazione.
- Nel campo Percorso (
path), aggiungi/per abilitare.- Un valore vuoto disattiva il gestore di autenticazione.
- Fai clic su Salva.
Definire i percorsi di contenuto o sling:resourceTypes da aprire nell'editor universale paths
-
Apri Configuration Manager.
http://<host>:<port>/system/console/configMgr
-
Individua Servizio URL editor universale nell’elenco e fai clic su Modifica i valori di configurazione.
-
Definisci i percorsi di contenuto o
sling:resourceTypesper 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 deve essere aperto da Universal Editor, immettere un elenco di risorse che Universal Editor apre direttamente.
-
Fai clic su Salva.
-
Controlla la configurazione di Externalizer e assicurati almeno di avere gli 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 apre l’Editor universale per le pagine nell’ordine seguente:
-
AEM controlla le mappature in
Universal Editor Opening Mappinge se il contenuto si trova in uno dei percorsi qui definiti, viene aperto l'Editor universale. -
Per il contenuto non compreso nei percorsi definiti in
Universal Editor Opening Mapping, AEM controlla se il contenutoresourceTypecorrisponde a una voce in Sling:resourceTypes che verrà aperta da Universal Editor. Se corrisponde, AEM apre il contenuto nell'editor universale in${author}${path}.html. -
In caso contrario, AEM apre l’Editor pagina.
Per definire le mappature sono disponibili le seguenti variabili in Universal Editor Opening Mapping.
path: percorso del contenuto della risorsa da aprirelocalhost: voce esternalizzazione perlocalhostsenza schema, ad esempiolocalhost:4502author: voce esternalizzazione per autore senza schema, ad esempiolocalhost:4502publish: voce esternalizzazione per pubblicazione senza schema, ad esempiolocalhost:4503preview: voce esternalizzatore per l'anteprima senza schema, ad esempiolocalhost:4504env:prod,stage,devin base alle modalità di esecuzione di Sling definitetoken: token di query richiesto perQueryTokenAuthenticationHandler
Esempi di mappature:
-
Apri tutte le pagine in
/content/fooin AEM Author:/content/foo:${author}${path}.html?login-token=${token}- Risultati nell'apertura di
https://localhost:4502/content/foo/x.html?login-token=<token>
-
Apri tutte le pagine in
/content/barsu 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}- Risultati nell'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 editor universale locale per le attività locali di sviluppo e testing.
-
Installa Node.js versione >=20.
-
Scarica e decomprimi il servizio Universal Editor più recente da Software Distribution
-
Configurare il servizio Universal Editor tramite variabili di ambiente o file
.env.- Per informazioni dettagliate, consulta la documentazione dell’editor universale di AEM as a Cloud Service.
- Nota che potresti dover utilizzare l’opzione
UES_MAPPINGse è richiesta la riscrittura interna dell’IP.
-
Eseguire
universal-editor-service.cjs
Aggiornare Dispatcher update-dispatcher
Con AEM configurato e un servizio Universal Editor locale in esecuzione, è necessario consentire un proxy inverso per il nuovo servizio in Dispatcher.
-
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 La porta predefinita è 8080. Se hai modificato questo elemento usando il parametro UES_PORTnel tuo file.env, devi modificare di conseguenza il valore della porta qui. -
Riavvia Apache.
Strumentazione dell’app instrumentation
Con AEM aggiornato e un servizio editor universale locale in esecuzione, puoi iniziare a modificare contenuti headless utilizzando l’editor universale.
Tuttavia, l’app deve essere dotata di strumenti che consentano di sfruttare i vantaggi dell’editor universale. Comporta l’inclusione di metatag 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.
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 LTS.
-
Il protocollo nel tag meta deve essere
aem65invece diaem.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
pluginsdella definizione dei componenti, è necessario utilizzareaem65invece diaem.
Differenze tra AEM 6.5 LTS e AEM as a Cloud Service differences
L’editor universale in AEM 6.5 LTS funziona in generale come in AEM as a Cloud Service, inclusa l’interfaccia utente e gran parte della configurazione. Ci sono, tuttavia, delle differenze che dovresti notare.
- Universal Editor in 6.5 LTS supporta solo il caso d’uso headless.
- La configurazione di Universal Editor varia leggermente per 6,5 LTS (come descritto nel documento corrente).
- L’editor universale in 6.5 LTS utilizza un selettore di risorse diverso e un selettore di frammenti di contenuto diverso da AEM as a Cloud Service.