Single page applications (SPA) can offer compelling experiences for website users. Utvecklare vill kunna skapa webbplatser med SPA ramverk och författare vill smidigt redigera innehåll i AEM för en webbplats som skapats med sådana ramverk.
SPA Editor erbjuder en omfattande lösning för SPA inom AEM. På den här sidan får du en översikt över hur SPA stöds är strukturerat i AEM, hur SPA redigeraren fungerar och hur SPA ramverk och AEM är synkroniserade.
Webbplatser som byggts med vanliga SPA som React och Angular läser in sitt innehåll via dynamisk JSON och tillhandahåller inte den HTML-struktur som krävs för att den AEM sidredigeraren ska kunna placera redigeringskontroller.
Om du vill kunna redigera SPA i AEM måste du mappa mellan JSON-utdata för SPA och innehållsmodellen i den AEM databasen för att kunna spara ändringar i innehållet.
SPA i AEM innehåller ett tunt JS-lager som interagerar med den SPA JS-koden när den läses in i sidredigeraren. Händelser kan skickas med och platsen för redigeringskontrollerna kan aktiveras för redigering i sitt sammanhang. Den här funktionen bygger på API-slutpunktskonceptet för innehållstjänster eftersom innehållet från SPA måste läsas in via innehållstjänster.
Mer information om SPA i AEM finns i följande dokument:
Sidkomponenten för en SPA tillhandahåller inte elementen HTML i dess underordnade komponenter via JSP- eller HTML-filen. Den här åtgärden har delegerats till SPA ramverk. Representationen av underordnade komponenter eller modeller hämtas som en JSON-datastruktur från JCR. De SPA komponenterna läggs sedan till på sidan enligt den strukturen. Det här beteendet skiljer sidkomponentens ursprungliga brödkomposition från icke-SPA.
Lösning och hantering av sidmodellen delegeras till en angiven PageModel
bibliotek. SPA måste använda sidmodellbiblioteket så att det kan initieras och redigeras av SPA. Sidmodellbiblioteket som indirekt tillhandahålls AEM sidkomponenten via aem-react-editable-components
npm. Sidmodellen är en tolk mellan AEM och SPA och måste därför alltid finnas. När sidan har skapats, ytterligare ett bibliotek cq.authoring.pagemodel.messaging
måste läggas till för att det ska gå att kommunicera med sidredigeraren.
Om den SPA sidkomponenten ärver från sidhuvudkomponenten finns det två alternativ för att skapa cq.authoring.pagemodel.messaging
tillgänglig klientbibliotekskategori:
customfooterlibs.html
.För varje resurs i den exporterade modellen mappas SPA en faktisk komponent som utför återgivningen. Modellen, som representeras som JSON, återges sedan med komponentmappningarna i en behållare.
Inkluderingen av cq.authoring.pagemodel.messaging
-kategorin ska begränsas till SPA.
När cq.authoring.pagemodel.messaging
läggs till på sidan, skickas ett meddelande till sidredigeraren för att fastställa JSON-kommunikationens datatyp. När kommunikationsdatatypen är JSON kommunicerar GET-förfrågningarna med Sling Model-slutpunkterna för en komponent. När en uppdatering har gjorts i sidredigeraren skickas JSON-representationen av den uppdaterade komponenten till sidmodellsbiblioteket. Sidmodellbiblioteket informerar sedan SPA om uppdateringar.
Du kan förstå interaktionsflödet mellan SPA och AEM genom att tänka på SPA redigerare som en medlare mellan de två.
Med tanke på de viktigaste elementen i SPA Editor visas arbetsflödet på hög nivå för redigering av en SPA i AEM för författaren enligt följande.
Kom ihåg:
Detta är en mer detaljerad översikt över klient-server-interaktionen när du redigerar en SPA.
SPA initierar sig själv och begär sidmodellen från Sling Model Exporter.
Sling Model Exporter begär de resurser som utgör sidan från databasen.
Databasen returnerar resurserna.
Sling Model Exporter returnerar sidans modell.
SPA instansierar sina komponenter baserat på sidmodellen.
6a Innehållet informerar redigeraren om att det är klart för redigering.
6b Sidredigeraren begär komponentredigeringskonfigurationer.
6c Sidredigeraren tar emot komponentkonfigurationerna.
När författaren redigerar en komponent skickar sidredigeraren en ändringsbegäran till standardserverprogrammet för POST.
Resursen uppdateras i databasen.
Den uppdaterade resursen tillhandahålls servertjänsten för POST.
Standardserverpaketet informerar sidredigeraren om att POSTEN har uppdaterats.
Sidredigeraren begär den nya sidmodellen.
Resurserna som utgör sidan begärs från databasen.
Resurserna som utgör sidan tillhandahålls av databasen till Sling Model Exporter.
Den uppdaterade sidmodellen returneras till redigeraren.
Sidredigeraren uppdaterar sidmodellreferensen för SPA.
SPA uppdaterar sina komponenter baserat på den nya sidmodellreferensen.
Komponentkonfigurationerna för sidredigerarna uppdateras.
17a SPA signalerar till sidredigeraren att innehållet är klart.
17b Sidredigeraren tillhandahåller SPA med komponentkonfigurationer.
17c SPA tillhandahåller uppdaterade komponentkonfigurationer.
Det här är en mer detaljerad översikt som fokuserar på redigeringsupplevelsen.
SPA hämtar sidmodellen.
2a Sidmodellen förser redigeraren med de data som krävs för redigering.
2b När det visas ett meddelande uppdaterar komponentens orchestrator sidans innehållsstruktur.
Komponentkoordinatorn efterfrågar mappningen mellan en AEM resurstyp och en SPA.
Komponentkoordinatorn instansierar SPA dynamiskt baserat på sidmodell och komponentmappning.
Sidredigeraren uppdaterar sidmodellen.
6a Sidmodellen innehåller uppdaterade redigeringsdata för sidredigeraren.
6b Sidmodellen skickar ändringar till komponenten orchestrator.
Komponentkoordinatorn hämtar komponentmappningen.
Komponentkoordinatorn uppdaterar sidans innehåll.
När SPA har uppdaterat sidans innehåll läses redigeraren in i redigeringsmiljön.
Om du vill att författaren ska kunna använda sidredigeraren för att redigera innehållet i en SPA måste ditt SPA program implementeras för att interagera med AEM SDK för SPA. Se Komma igång med SPA i AEM med React så att du inte behöver veta mer för att få igång ditt dokument.
SPA Editor SDK har stöd för följande minimiversioner:
Tidigare versioner av dessa ramverk kan fungera med AEM SDK för redigeraren, men stöds inte.
Ytterligare SPA kan implementeras för att fungera med AEM SPA Editor SDK. Se SPA Blueprint dokumentera de krav som ett ramverk måste uppfylla för att skapa ett ramverksspecifikt lager som består av moduler, komponenter och tjänster för att fungera med AEM SPA.
Ytterligare anpassade väljare kan definieras och användas som en del av en SPA som utvecklats för AEM SDK. Detta stöd kräver dock att model
vara den första väljaren och tillägget vara .json
enligt JSON-exportörens krav.
Om du vill använda redigeraren i stället för en textkomponent som skapats i SPA måste du konfigurera ytterligare.
<div>
-elementet och väljaren som har använts är data-rte-editelement
.editElementQuery
på motsvarande AEM cq:InplaceEditingConfig
som pekar på den väljaren, till exempel data-rte-editelement
. På så sätt kan redigeraren veta vilket HTML-element som radbryter HTML-texten.Mer information om editElementQuery
-egenskapen och konfigurationen för RTF-redigeraren finns i Konfigurera RTF-redigeraren.
AEM SPA Editor SDK stöds fullt ut av Adobe och fortsätter att förbättras och utökas. Följande AEM stöds ännu inte av SPA Editor: