Om den universella redigeraren universal-editor
Läs om flexibiliteten i Universal Editor och hur det kan hjälpa dig att skapa en headless-upplevelse med AEM 6.5 LTS.
Ökning overview
Universal Editor är en mångsidig visuell editor som ingår i Adobe Experience Manager Sites. Man kan göra vad man vill - se-is-what-you-get (WYSIWYG)-redigering av headlessupplevelser.
- Författare drar nytta av den universella redigerarens flexibilitet. Det har stöd för samma enhetliga visuella redigering för alla former av AEM headless-innehåll.
- Utvecklarna drar nytta av universella redigerares mångsidighet eftersom den även stöder en sann frikoppling av implementeringen. Det gör att utvecklare kan använda praktiskt taget vilket ramverk eller vilken arkitektur de vill, utan att det medför några begränsningar för SDK eller teknik.
Mer information finns i AEM as a Cloud Service-dokumentationen för Universal Editor.
Arkitektur architecture
Universell redigerare är en tjänst som fungerar tillsammans med AEM för att skapa innehåll utan problem.
- Den universella redigeraren finns på
https://experience.adobe.com/#/aem/editor/canvasoch kan redigera sidor som återges av AEM 6.5 LTS. - Universal Editor läser AEM-sidan via Dispatcher från AEM författarinstans.
- Universal Editor-tjänsten, som körs på samma värd som Dispatcher, skriver tillbaka ändringarna till AEM författarinstans.
Krav requirements
Följande har stöd för Universal Editor:
- AEM 6.5 LTS GA
- Både lokal värdtjänst och Adobe Managed Services (AMS) stöds.
- AEM 6.5
- Både lokala värdtjänster och AMS-värdtjänster stöds.
- AEM as a Cloud Service (release
2023.8.13099eller senare)
Det här dokumentet fokuserar på AEM 6.5 LTS-stöd i Universal Editor. Om du vill använda den universella redigeraren med AEM 6.5 LTS behöver du följande:
- AEM 6.5 LTS GA
- Dispatcher är korrekt konfigurerat
Inställningar setup
Så här använder du den universella redigeraren:
När du har slutfört konfigurationen kan du instrumentera dina program så att de använder den universella redigeraren.
Konfigurera tjänster configure-aem
Den universella redigeraren använder ett antal tjänster som måste konfigureras.
Ange samma webbplatsattribut för cookien login-token. samesite-attribute
- Öppna Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Leta reda på Autentiseringshanteraren för Adobe Granite-token i listan och klicka på Ändra konfigurationsvärdena.
- I dialogrutan ändrar du attributet SameSite för cookie-filen för inloggningstoken (
token.samesite.cookie.attr) tillPartitioned. - Klicka på Spara.
Ta bort alternativet SAMEORIGIN sidhuvuden i X-bildrutan. sameorigin
- Öppna Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Leta reda på Huvudservern för Apache Sling i listan och klicka på Redigera konfigurationsvärdena.
- Ta bort värdet
X-Frame-Options=SAMEORIGINfrån attributet Additional response headers (sling.additional.response.headers) om det finns. - Klicka på Spara.
Konfigurera autentiseringshanteraren för Adobe Granite-frågeparametern query-parameter
- Öppna Configuration Manager.
http://<host>:<port>/system/console/configMgr
- Leta reda på Autentiseringshanteraren för Adobe Granite-frågeparametern i listan och klicka på Redigera konfigurationsvärdena.
- I fältet Sökväg (
path) lägger du till/för att aktivera.- Ett tomt värde inaktiverar autentiseringshanteraren.
- Klicka på Spara.
Definiera vilka innehållssökvägar eller sling:resourceTypes som ska vara öppna i den universella redigeraren paths
-
Öppna Configuration Manager.
http://<host>:<port>/system/console/configMgr
-
Leta reda på URL-tjänsten för den universella redigeraren i listan och klicka på Redigera konfigurationsvärdena.
-
Definiera för vilka innehållssökvägar eller
sling:resourceTypesden universella redigeraren ska öppnas.- Ange sökvägarna som den universella redigeraren öppnas för i fältet Öppna mappning för den universella redigeraren.
- Ange en lista med resurser som den universella redigeraren öppnar direkt i fältet Sling:resourceTypes som ska öppnas av den universella redigeraren.
-
Klicka på Spara.
-
Kontrollera din Externalizer-konfiguration och se till att du har minst den lokala miljön, författaren och publiceringsmiljön inställd som i följande exempel:
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]"
När dessa konfigurationssteg är klara öppnar AEM den universella redigeraren för sidor i följande ordning:
-
AEM kontrollerar mappningarna under
Universal Editor Opening Mappingoch om innehållet finns under sökvägar som definierats där öppnas Universell redigerare för det. -
För innehåll utanför de sökvägar som definieras i
Universal Editor Opening Mappingkontrollerar AEM om innehålletresourceTypematchar en post i Sling:resourceTypes som ska öppnas av Universal Editor. Om den matchar öppnar AEM innehållet i den universella redigeraren på${author}${path}.html. -
I annat fall öppnas sidredigeraren.
Följande variabler är tillgängliga för att definiera dina mappningar under Universal Editor Opening Mapping.
path: Innehållssökvägen för resursen som ska öppnaslocalhost: Externalizer-post förlocalhostutan schema, till exempellocalhost:4502author: Externalizer-post för författare utan schema, till exempellocalhost:4502publish: Externalizer-post för publicering utan schema, till exempellocalhost:4503preview: Externalizer-post för förhandsgranskning utan schema, till exempellocalhost:4504env:prod,stage,devbaserat på definierade körningslägen för Slingtoken: Frågetoken krävs förQueryTokenAuthenticationHandler
Exempelmappningar:
-
Öppna alla sidor under
/content/foopå AEM Author:/content/foo:${author}${path}.html?login-token=${token}- Resultat när
https://localhost:4502/content/foo/x.html?login-token=<token>öppnas
-
Öppna alla sidor under
/content/barpå en fjärr-NextJS-server, med alla variabler som information/content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}- Resultat när
https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>öppnas
Konfigurera Universal Editor-tjänsten set-up-ue
Med AEM uppdaterat och konfigurerat kan du skapa en lokal universell redigeringstjänst för lokal utveckling och testning.
-
Installera Node.js version >=20.
-
Hämta och packa upp den senaste universella redigeringstjänsten från Programvarudistribution
-
Konfigurera den universella redigeringstjänsten med hjälp av miljövariabler eller filen
.env.- Mer information finns i dokumentationen för AEM as a Cloud Service Universal Editor.
- Observera att du kan behöva använda alternativet
UES_MAPPINGom intern IP-omskrivning krävs.
-
Kör
universal-editor-service.cjs
Uppdatera Dispatcher update-dispatcher
Om AEM är konfigurerat och en lokal Universal Editor-tjänst körs måste du tillåta en omvänd proxy för den nya tjänsten i Dispatcher.
-
Justera författarinstansens värdfil så att den innehåller en omvänd proxy.
code language-html <IfModule mod_proxy.c> ProxyPass "/universal-editor" "http://localhost:8080" ProxyPassReverse "/universal-editor" "http://localhost:8080" </IfModule>note note NOTE 8080 är standardporten. Om du ändrade detta med parametern UES_PORTi din.env-fil måste du justera portvärdet här i enlighet med detta. -
Starta om Apache.
Instrumentera din app instrumentation
Med AEM uppdaterad och en lokal Universal Editor-tjänst kan du börja redigera headless-innehåll med hjälp av Universell Editor.
Ditt program måste dock vara instrumenterat för att du ska kunna använda den universella redigeraren. Det innefattar att inkludera metataggar för att instruera redigeraren hur och var innehållet ska sparas. Information om den här instrumenteringen finns i Universal Editor-dokumentationen för AEM as a Cloud Service.
Observera att följande dokumentation för Universal Editor med AEM as a Cloud Service gäller när du använder den med AEM 6.5 LTS.
-
Protokollet i meta-taggen måste vara
aem65i stället föraem.code language-html <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/> -
Slutpunkten för Universal Editor-tjänsten måste tillkännages via en metatagg.
code language-html <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/> -
I avsnittet
pluginsi komponentdefinitionen måsteaem65användas i stället föraem.
Skillnader mellan AEM 6.5 LTS och AEM as a Cloud Service differences
Universal Editor i AEM 6.5 LTS fungerar ungefär på samma sätt som i AEM as a Cloud Service, inklusive användargränssnittet och mycket av installationsprogrammet. Det finns dock skillnader som du bör notera.
- Universal Editor i 6.5 LTS stöder endast headless use case.
- Inställningarna för den universella redigeraren varierar något för 6,5 LTS (enligt beskrivningen i det aktuella dokumentet).
- Universell redigerare i 6.5 LTS använder en annan resursväljare och en annan Content Fragment-väljare än AEM as a Cloud Service.