Overzicht SPA Editor spa-editor-overview
Toepassingen op één pagina (SPA) kunnen aantrekkelijke ervaringen bieden voor websitegebruikers. Ontwikkelaars willen sites kunnen maken met behulp van SPA frameworks en auteurs willen inhoud naadloos bewerken binnen AEM voor een site die is gebouwd met behulp van dergelijke frameworks.
De SPA Editor biedt een uitgebreide oplossing voor het ondersteunen van SPA binnen AEM. Deze pagina geeft een overzicht van hoe SPA ondersteuning is gestructureerd in AEM, hoe de SPA Editor werkt en hoe het SPA framework en de AEM synchroon blijven.
Inleiding introduction
De plaatsen die gebruikend gemeenschappelijke SPA zoals React en Angular worden gebouwd laden hun inhoud via dynamische JSON en verstrekken niet de structuur van de HTML die noodzakelijk voor de AEM Redacteur van de Pagina is om bewerkingscontroles te kunnen plaatsen.
Om het bewerken van SPA binnen AEM mogelijk te maken, is een toewijzing tussen de JSON-uitvoer van de SPA en het inhoudsmodel in de AEM opslagplaats nodig om wijzigingen in de inhoud op te slaan.
SPA ondersteuning in AEM introduceert een dunne JS-laag die communiceert met de SPA JS-code wanneer deze wordt geladen in de Pagina-editor waarmee gebeurtenissen kunnen worden verzonden en de locatie voor de bewerkingsbesturingselementen kan worden geactiveerd om in-context bewerken mogelijk te maken. Deze eigenschap bouwt op het concept van het Eindpunt van de Diensten van de Inhoud API voort aangezien de inhoud van de SPA via de Diensten van de Inhoud moet worden geladen.
Raadpleeg de volgende documenten voor meer informatie over SPA in AEM:
- SPA voor de technische voorschriften van een SPA
- Aan de slag met SPA in AEM voor een snelle rondleiding van een eenvoudige SPA
Ontwerp design
De paginacomponent voor een SPA verstrekt niet de HTML elementen van zijn kindcomponenten via het JSP of HTML- dossier. Deze bewerking wordt gedelegeerd aan het SPA. De representatie van onderliggende componenten of modellen wordt opgehaald als een JSON-gegevensstructuur van het JCR. De SPA componenten worden vervolgens volgens die structuur aan de pagina toegevoegd. Dit gedrag onderscheidt de aanvankelijke lichaamssamenstelling van de paginacomponent van niet-SPA tegenhangers.
Paginamodel beheren page-model-management
De resolutie en het beheer van het paginamodel worden gedelegeerd aan een opgegeven PageModel bibliotheek. De SPA moet de bibliotheek Paginamodel gebruiken om te worden geïnitialiseerd en door de SPA Editor te worden ontworpen. De bibliotheek Paginamodel die indirect via de aem-react-editable-components npm. Het paginamodel is een tolk tussen AEM en de SPA en moet daarom altijd aanwezig zijn. Wanneer de pagina is gemaakt, voegt u een extra bibliotheek toe cq.authoring.pagemodel.messaging moet worden toegevoegd om de communicatie met de paginaeditor mogelijk te maken.
Als de SPA paginacomponent overerft van de hoofdcomponent van de pagina, zijn er twee opties voor het maken van de component cq.authoring.pagemodel.messaging beschikbare categorie voor clientbibliotheek:
- Als de sjabloon bewerkbaar is, voegt u deze toe aan het paginabeleid.
- U kunt ook de categorieën toevoegen met de opdracht
customfooterlibs.html.
Voor elke bron in het geëxporteerde model zal de SPA een werkelijke component toewijzen die de opdracht
renderen. Het model, dat als JSON wordt vertegenwoordigd, wordt dan teruggegeven gebruikend de componentenafbeeldingen binnen een container.
cq.authoring.pagemodel.messaging Deze categorie moet beperkt blijven tot de context van de SPA-editor.Gegevenstype communicatie communication-data-type
Wanneer de cq.authoring.pagemodel.messaging wordt toegevoegd aan de pagina. Er wordt een bericht verzonden naar de Pagina-editor om het JSON-communicatietype vast te stellen. Wanneer het gegevenstype van communicatiegegevens aan JSON wordt geplaatst, zullen de verzoeken van de GET met de Sling Model eindpunten van een component communiceren. Nadat een update in de pagina-editor plaatsvindt, wordt de JSON-representatie van de bijgewerkte component verzonden naar de bibliotheek Paginamodel. De bibliotheek Paginamodel stelt vervolgens de SPA van updates op de hoogte.
Workflow workflow
U kunt de stroom van de interactie tussen de SPA en AEM begrijpen door de SPA Redacteur als bemiddelaar tussen twee te denken.
- De communicatie tussen de pagina-editor en de SPA wordt gemaakt met JSON in plaats van met HTML.
- De pagina-editor biedt de meest recente versie van het paginamodel aan de SPA via de iframe- en messaging-API.
- De manager van het paginamodel brengt de redacteur op de hoogte het klaar voor uitgave is en gaat het paginamodel als structuur JSON over.
- De editor wijzigt de DOM-structuur van de pagina die wordt gemaakt niet of opent deze zelfs niet, maar biedt het nieuwste paginamodel.
Basic SPA Editor Workflow basic-spa-editor-workflow
Met inachtneming van de belangrijkste elementen van de SPA Editor, ziet de auteur de workflow op hoog niveau voor het bewerken van een SPA binnen AEM er als volgt uit.
-
SPA Editor wordt geladen.
-
SPA wordt in een afzonderlijk frame geladen.
-
SPA vraagt JSON-inhoud aan en rendert componenten client-side.
-
SPA Editor detecteert gerenderde componenten en genereert overlays.
-
De auteur klikt op bedekking en toont de bewerkingswerkbalk van de component.
-
SPA de Redacteur met een verzoek van de POST aan de server voortduurt uitgeeft.
-
SPA Editor vraagt bijgewerkte JSON naar de SPA Editor, die met een DOM-gebeurtenis naar de SPA wordt verzonden.
-
SPA geeft de betrokken component opnieuw weer, waarbij het DOM wordt bijgewerkt.
- De SPA is altijd verantwoordelijk voor de weergave.
- De SPA Editor staat los van de SPA zelf.
- In productie (publiceren), wordt de SPA redacteur nooit geladen.
Workflow voor paginabewerking op client-server client-server-page-editing-workflow
Dit is een gedetailleerder overzicht van de interactie tussen client en server bij het bewerken van een SPA.
-
De SPA initialiseert zichzelf en vraagt het paginamodel aan bij Sling Model Exporter.
-
De verkoper ModelExporter verzoekt om de middelen die de pagina van de bewaarplaats samenstellen.
-
De repository retourneert de bronnen.
-
De verkoper van het ModelExporter keert het model van de pagina terug.
-
De SPA instantieert zijn componenten die op het paginamodel worden gebaseerd.
-
6 bis. De inhoud informeert de editor dat deze gereed is voor ontwerpen.
6 ter De paginaeditor vraagt om configuraties voor componentontwerp.
6 quater De paginaeditor ontvangt de componentconfiguraties.
-
Wanneer de auteur een component bewerkt, wordt in de pagina-editor een wijzigingsverzoek naar de standaard POST servlet gepost.
-
De bron wordt bijgewerkt in de opslagplaats.
-
De bijgewerkte bron wordt doorgegeven aan de POST servlet.
-
De standaard server van de POST deelt de paginaredacteur mee dat het middel is bijgewerkt.
-
De paginaeditor vraagt om het nieuwe paginamodel.
-
De bronnen waaruit de pagina bestaat, worden opgevraagd bij de opslagplaats.
-
De bronnen waaruit de pagina bestaat, worden door de gegevensopslagruimte aan de Verkoopmodel Exporter verschaft.
-
Het bijgewerkte paginamodel wordt geretourneerd aan de editor.
-
De paginaredacteur werkt de verwijzing van het paginamodel van de SPA bij.
-
De SPA werkt zijn componenten bij die op de nieuwe verwijzing van het paginamodel worden gebaseerd.
-
De componentconfiguraties van de paginaeditors worden bijgewerkt.
17 bis De SPA geeft aan dat de inhoud klaar is voor de pagina-editor.
17 ter De paginaredacteur voorziet de SPA van componentenconfiguraties.
17 quater De SPA biedt bijgewerkte componentconfiguraties.
Ontwerpworkflow authoring-workflow
Dit is een gedetailleerder overzicht dat is toegespitst op de ontwerpervaring.
-
De SPA haalt het paginamodel op.
-
2 bis. Het paginamodel voorziet de redacteur van de gegevens die voor creatie worden vereist.
2 ter Wanneer deze op de hoogte wordt gesteld, werkt de componentbeheerder de inhoudsstructuur van de pagina bij.
-
De componentenbeheerder vraagt de afbeelding tussen een AEM middeltype en een SPA component.
-
De componentinstantie instantieert dynamisch de SPA component op basis van het paginamodel en de componenttoewijzing.
-
De paginaeditor werkt het paginamodel bij.
-
6 bis. Het paginamodel verstrekt bijgewerkte auteursgegevens aan de paginaredacteur.
6 ter Het paginamodel verzendt wijzigingen naar de componentorchestrator.
-
De componentorchestrator haalt de componenttoewijzing op.
-
De componentbeheerder werkt de inhoud van de pagina bij.
-
Wanneer de SPA klaar is met het bijwerken van de inhoud van de pagina, laadt de pagina-editor de ontwerpomgeving.
Vereisten en beperkingen requirements-limitations
Om de auteur in staat te stellen om de paginaredacteur te gebruiken om de inhoud van een SPA uit te geven, moet uw SPA toepassing worden uitgevoerd om met de AEM SPA Redacteur SDK in wisselwerking te staan. Zie de Aan de slag met SPA in AEM -document voor minimale informatie die u nodig hebt om die van u te kunnen gebruiken.
Ondersteunde kaders supported-frameworks
De SPA Editor SDK ondersteunt de volgende minimale versies:
- 16.x en hoger reageren
- Angular 6.x en hoger
Eerdere versies van deze frameworks werken mogelijk met de AEM SPA Editor SDK, maar worden niet ondersteund.
Aanvullende kaders additional-frameworks
Er kunnen aanvullende SPA worden geïmplementeerd om te werken met de AEM SPA Editor SDK. Zie de SPA document voor de vereisten waaraan een kader moet voldoen om tot een kader-specifieke laag te leiden die uit modules, componenten, en de diensten wordt samengesteld om met de AEM SPA Redacteur te werken.
Meerdere kiezers gebruiken multiple-selectors
Aanvullende aangepaste kiezers kunnen worden gedefinieerd en gebruikt als onderdeel van een SPA die is ontwikkeld voor de AEM SPA SDK. Deze ondersteuning vereist echter dat de model selector is de eerste kiezer en de extensie is .json als vereist door de JSON Exporter.
Vereisten voor teksteditor text-editor-requirements
Als u de op plaats-editor wilt gebruiken van een tekstcomponent die in SPA is gemaakt, is er aanvullende configuratie vereist.
- Stel een willekeurig kenmerk in op het containerelement dat de tekst HTML bevat. Voor de WKND Journal-voorbeeldinhoud is het een
<div>element en de kiezer die is gebruikt, isdata-rte-editelement. - De configuratie instellen
editElementQueryop de overeenkomstige AEM tekstcomponentcq:InplaceEditingConfigdie naar die kiezer wijst, bijvoorbeelddata-rte-editelement. Dit laat de redacteur weten welk element van HTML de HTML tekst verpakt.
Voor een voorbeeld van hoe dit wordt gedaan, zie WKND Journal-voorbeeldinhoud.
Voor meer informatie over de editElementQuery eigenschap en de configuratie van de teksteditor met opmaak, raadpleegt u Configureer de Rich Text Editor.
Beperkingen limitations
De AEM SPA Editor SDK werd geïntroduceerd met AEM 6.4 service pack 2. Het wordt volledig gesteund door Adobe, en als nieuwe eigenschap blijft het worden verbeterd en uitgebreid. De SPA Editor heeft nog geen betrekking op de volgende AEM:
- Doelmodus
- ContextHub
- Inline-afbeeldingen bewerken
- Configs bewerken (bijv. listeners)
- Stijlsysteem
- Ongedaan maken/Opnieuw
- Pagina diff en Tijd verdraaien
- Functies die HTML herschrijven aan de serverzijde uitvoeren, zoals Koppelingencontrole, CDN-herschrijvingsservice, URL-verkorting enz.
- Modus Ontwikkelaar
- AEM starten