SPA spa-editor-overview

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 uppbyggt i AEM, hur SPA redigeraren fungerar och hur SPA ramverk och AEM är synkroniserade.

Introduktion introduction

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:

Design design

Sidkomponenten för en SPA tillhandahåller inte elementen HTML i dess underordnade komponenter via JSP- eller HTL-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. SPA komponenter läggs sedan till på sidan enligt den strukturen. Det här beteendet skiljer sidkomponentens ursprungliga brödkomposition från icke-SPA.

Sidmodellshantering page-model-management

Upplösningen och hanteringen av sidmodellen har delegerats till ett angivet PageModel-bibliotek. SPA måste använda sidmodellbiblioteket så att det kan initieras och redigeras av SPA. Sidmodellbiblioteket tillhandahölls indirekt till AEM sidkomponent 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 måste ytterligare ett bibliotek cq.authoring.pagemodel.messaging läggas till för att möjliggöra kommunikation med sidredigeraren.

Om den SPA sidkomponenten ärver från sidhuvudkomponenten finns det två alternativ för att göra klientbibliotekskategorin cq.authoring.pagemodel.messaging tillgänglig:

För varje resurs i den exporterade modellen kommer SPA att mappa en faktisk komponent som gör
återgivning. Modellen, som representeras som JSON, återges sedan med komponentmappningarna i en behållare.

Kommunikationsdatatyp communication-data-type

När kategorin 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.

Arbetsflöde workflow

Du kan förstå interaktionsflödet mellan SPA och AEM genom att tänka på SPA redigerare som en medlare mellan de två.

Grundläggande SPA Editor basic-spa-editor-workflow

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.

Sidredigeringsarbetsflöde för klient-server client-server-page-editing-workflow

Detta är en mer detaljerad översikt över klient-server-interaktionen när du redigerar en SPA.

Redigeringsarbetsflöde authoring-workflow

Det här är en mer detaljerad översikt som fokuserar på redigeringsupplevelsen.

Krav och begränsningar requirements-limitations

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 dokumentet Komma igång med SPA i AEM med React för att få reda på vad du behöver veta för att få igång ditt arbete.

Ramverk som stöds supported-frameworks

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 ramar additional-frameworks

Ytterligare SPA kan implementeras för att fungera med AEM SPA Editor SDK. Se dokumentet SPA Blueprint för 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.

Använda flera väljare multiple-selectors

Ytterligare anpassade väljare kan definieras och användas som en del av en SPA som utvecklats för AEM SDK. Det här stödet kräver dock att väljaren model är den första väljaren och tillägget är .json enligt JSON-exportörens krav.

Krav för textredigeraren text-editor-requirements

Om du vill använda redigeraren i stället för en textkomponent som skapats i SPA måste du konfigurera ytterligare.

Mer information om egenskapen editElementQuery och konfigurationen av RTF-redigeraren finns i Konfigurera RTF-redigeraren.

Begränsningar limitations

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: