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.
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.
Impostare l'attributo SameSite per il cookie login-token
. samesite-attribute
- Apri Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Individua il gestore di autenticazione token Adobe Granite nell'elenco e fai clic su Modifica i valori di configurazione.
- Nella finestra di dialogo, modifica l'attributo SameSite per il cookie 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 Apache Sling Main Servlet nell'elenco e fai clic su Modifica i valori di configurazione.
- Eliminare il valore
X-Frame-Options=SAMEORIGIN
dall'attributo Altre intestazioni di risposta (sling.additional.response.headers
) se esistente. - Fai clic su Salva.
Configura il gestore di autenticazione dei parametri di query Adobe Granite. query-parameter
- Apri Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Individua il gestore di autenticazione dei parametri di query 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
per cui aprire l'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.
-
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.
-
Fai clic su Salva.
AEM aprirà l’Editor universale per le pagine basate su questa configurazione.
- 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. - Per il contenuto non incluso nei percorsi definiti in
Universal Editor Opening Mapping
, l'AEM controlla se ilresourceType
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
. - 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 aprirelocalhost
: voce esternalizzatore perlocalhost
senza schema, ad esempiolocalhost:4502
author
: voce esternalizzazione per autore senza schema, ad esempiolocalhost:4502
publish
: voce esternalizzatore per la pubblicazione senza schema, ad esempiolocalhost:4503
preview
: voce esternalizzatore per l'anteprima senza schema, ad esempiolocalhost:4504
env
:prod
,stage
,dev
in base alle modalità di esecuzione Sling definitetoken
: token di query richiesto perQueryTokenAuthenticationHandler
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.
-
Installa Node.js versione >=20.
-
Scarica e decomprimi il servizio Universal Editor più recente da Distribuzione software
-
Configurare il servizio Universal Editor tramite variabili di ambiente o file
.env
.- Per informazioni dettagliate, consulta la documentazione di AEM as a Cloud Service Universal Editor.
- Si noti che potrebbe essere necessario utilizzare l'opzione
UES_MAPPING
se è richiesta la riscrittura interna dell'IP.
-
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.
-
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. -
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 diaem
.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 utilizzareaem65
invece diaem
.
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.