Documentatie AEM as a Cloud Service Handboek

Aan de slag met de Universal Editor in AEM

Laatst bijgewerkt: 19 februari 2025

Onderwerpen:
Ontwikkelen

Gemaakt voor:

Beheerder
Ontwikkelaar

Leer hoe u toegang krijgt tot de Universal Editor en hoe u uw eerste AEM-app van instrumenten kunt voorzien om deze te gebruiken.

TIP

Als u in een voorbeeld zou verkiezen te duiken, kunt u de Universele SteekproefApp van de Redacteur op GitHubherzien.

Hoewel de Universal Editor inhoud uit elke bron kan bewerken, wordt in dit document een AEM-app als voorbeeld gebruikt. Dit document begeleidt u door deze stappen.

De pagina instrumenteren

De Universal Editor heeft een JavaScript-bibliotheek nodig om de pagina in de editor te kunnen renderen en bewerken.

Bovendien vereist de Universele dienst van de Redacteur a eenvormige middelnaam (URN)om het correcte backendesysteem voor de inhoud in app te identificeren en te gebruiken die wordt uitgegeven. Daarom wordt een schema URN vereist om inhoud terug naar inhoudsmiddelen in kaart te brengen.

Inclusief de Universal Editor CORS-bibliotheek

Als u wilt dat de Universal Editor verbinding maakt met uw app, moet uw app de Universal Editor CORS-bibliotheek bevatten. Voeg het volgende script toe aan uw app.

 <script src="https://universal-editor-service.adobe.io/cors.js" async></script>

Verbindingen maken

Verbindingen die in de app worden gebruikt, worden als <meta> -tags opgeslagen in de pagina's <head> .

<meta name="urn:adobe:aue:<category>:<referenceName>" content="<protocol>:<url>">

<category> - Dit is een classificatie van de verbinding met twee opties.
- system - Voor eindpunten van verbindingen
- config - voor bepalend facultatieve configuratiemontages
<referenceName> - Dit is een korte naam die opnieuw wordt gebruikt in het document om de verbinding te identificeren. Bijvoorbeeld: aemconnection
<protocol> - Hiermee wordt aangegeven welke persistentie-insteekmodule van de Universal Editor Persistence Service moet worden gebruikt. Bijvoorbeeld: aem
<url> - Dit is de URL naar het systeem waar de wijzigingen moeten worden voortgezet. Bijvoorbeeld: http://localhost:4502

De id urn:adobe:aue:system vertegenwoordigt de verbinding voor de universele Adobe-editor.

data-aue-resource s zal het urn voorvoegsel gebruiken om het herkenningsteken te verkorten.

data-aue-resource="urn:<referenceName>:<resource>"

<referenceName> - Dit is de benoemde referentie die wordt vermeld in de tag <meta> . Bijvoorbeeld: aemconnection
<resource> - Dit is een aanwijzer naar de bron in het doelsysteem. Bijvoorbeeld een AEM-inhoudspad, zoals /content/page/jcr:content

TIP

Zie het document Attributen en Typesvoor verdere details over de gegevensattributen en de types die de Universele Redacteur vereist.

Voorbeeldverbinding

<meta name="urn:adobe:aue:system:<referenceName>" content="<protocol>:<url>">

<html>
<head>
    <meta name="urn:adobe:aue:system:aemconnection" content="aem:https://localhost:4502">
    <meta name="urn:adobe:aue:system:fcsconnection" content="fcs:https://example.franklin.adobe.com/345fcdd">
</head>
<body>
        <aside>
          <ul data-aue-resource="urn:aemconnection:/content/example/list" data-aue-type="container">
            <li data-aue-resource="urn:aemconnection:/content/example/listitem" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">Jane Doe</p>
              <p data-aue-prop="title" data-aue-type="text">Journalist</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>

...

            <li data-aue-resource="urn:fcsconnection:/documents/mytext" data-aue-type="component">
              <p data-aue-prop="name" data-aue-type="text">John Smith</p>
              <p data-aue-resource="urn:aemconnection:/content/example/another-source" data-aue-prop="title" data-aue-type="text">Photographer</p>
              <img data-aue-prop="avatar" src="https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg" data-aue-type="image" alt="avatar"/>
            </li>
          </ul>
        </aside>
</body>
</html>

Configuratie-instellingen

U kunt het voorvoegsel config in uw verbinding URN gebruiken om dienst en uitbreidingseindpunten indien nodig te plaatsen.

Als u de Universal Editor-service, die door Adobe wordt gehost, maar uw eigen gehoste versie niet wilt gebruiken, kunt u dit instellen in een metatag. Om het standaardde diensteindpunt te beschrijven dat de Universele Redacteur verstrekt, plaats uw eigen de diensteindpunt:

Metanaam - urn:adobe:aue:config:service
Metainhoud - content="https://adobe.com" (voorbeeld)

<meta name="urn:adobe:aue:config:service" content="<url>">

Als u alleen bepaalde extensies wilt inschakelen voor een pagina, kunt u dit instellen in een metatag. Als u extensies wilt ophalen, stelt u de eindpunten van de extensie in:

Metanaam: urn:adobe:aue:config:extensions
Meta-inhoud: content="https://adobe.com,https://anotherone.com,https://onemore.com" (voorbeeld)

<meta name="urn:adobe:aue:config:extensions" content="<url>,<url>,<url>">

Bepaal waarvoor inhoudswegen of `sling:resourceType` s de Universele Redacteur zullen worden geopend. (Optioneel)

Als u een bestaand project van AEM gebruikend de paginaredacteurhebt, wanneer de inhoudsauteurs pagina's uitgeven, worden de pagina's automatisch geopend met de paginaredacteur. U kunt definiëren welke editor AEM moet openen op basis van de inhoudspaden of de sling:resourceType . Hierdoor verloopt de ervaring naadloos voor de auteurs, ongeacht de editor die nodig is voor de geselecteerde inhoud.

Als u deze configuratiefunctie wilt gebruiken, neemt u contact op met de klantenservice van Adobe om toegang tot de Universal Editor URL Service voor uw programma te activeren.
Zodra de Zorg van de Klant toegang tot de Universele dienst van de Redacteur URL heeft geactiveerd, open de Manager van de Configuratie.

http://<host>:<port>/system/console/configMgr
Bepaal de plaats van Universele Dienst URL van de Redacteur in de lijst en klik geef de configuratiewaarden uit.
Bepaal waarvoor inhoudswegen of sling:resourceType s de Universele Redacteur zullen worden geopend.
- Op het Universele gebied van de Toewijzing van de Redacteur die opent, verstrek de wegen waarvoor de Universele Redacteur wordt geopend.
- In Sling:resourceTypes die door Universeel gebied van de Redacteur zal worden geopend, verstrek een lijst van middelen die direct door de Universele Redacteur worden geopend.
Klik sparen.

Controleer uw externalizer configuratieen zorg bij een minimum u de lokale, auteur, en publiceer milieu's hebt die zoals in het volgende voorbeeld worden geplaatst.

"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]"

Zodra deze configuratiestappen volledig zijn, zal AEM de Universele Redacteur voor pagina's in de volgende orde openen.

AEM controleert de toewijzingen onder Universal Editor Opening Mapping en als de inhoud zich onder de aldaar gedefinieerde paden bevindt, wordt de Universal Editor geopend.
Voor inhoud niet onder wegen die in Universal Editor Opening Mapping worden bepaald, controleert AEM als resourceType van de inhoud die in worden bepaald Sling aanpast:resourceTypes die door Universele Redacteur zullen worden geopend en als de inhoud één van die types aanpast, wordt de Universele Redacteur voor het bij ${author}${path}.html geopend.
Anders opent AEM de Pagina-editor.

De volgende variabelen zijn beschikbaar om uw afbeeldingen op het Universele het Openen van de Redacteur 1} gebied van de Afbeelding te bepalen.

path: Inhoudspad van de bron die moet worden geopend
localhost: ExternalAlizer-item voor localhost zonder schema, bijvoorbeeld localhost:4502
author: ExternalAlizer-item voor auteur zonder schema, bijvoorbeeld localhost:4502
publish: ExternalAlizer-item voor publiceren zonder schema, bijvoorbeeld localhost:4503
preview: ExternalAlizer-item voor voorvertoning zonder schema, bijvoorbeeld localhost:4504
env: prod, stage dev op basis van de gedefinieerde uitvoeringsmodi voor Verschuiven
token: Zoektoken vereist voor de QueryTokenAuthenticationHandler

Voorbeeldtoewijzingen

Open alle pagina's onder /content/foo op de AEM-auteur:
- /content/foo:${author}${path}.html?login-token=${token}
- Dit leidt tot het openen van https://localhost:4502/content/foo/x.html?login-token=<token>
Open alle pagina's onder /content/bar op een externe NextJS-server, waarbij alle variabelen als informatie worden opgegeven:
- /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
- Dit leidt tot het openen van https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

U bent klaar om de Universal Editor te gebruiken

Uw app is nu van instrumenten voorzien om de Universal Editor te gebruiken.

Zie Authoring Inhoud met de Universele Redacteurom te leren hoe gemakkelijk en intuïtief het voor inhoudsauteurs is om inhoud tot stand te brengen gebruikend de Universele Redacteur.

Aanvullende bronnen

Zie deze documenten voor meer informatie over de Universal Editor.

Universele Inleiding van de Redacteur- Leer hoe de Universele Redacteur het uitgeven om het even welk aspect van om het even welke inhoud in om het even welke implementatie toelaat zodat kunt u uitzonderlijke ervaringen leveren, inhoudssnelheid verhogen, en een ervaring van de allernieuwste ontwikkelaar verstrekken.
Authoring Inhoud met de Universele Redacteur- Leer hoe gemakkelijk en intuïtief het voor inhoudsauteurs is om inhoud tot stand te brengen gebruikend de Universele Redacteur.
het Publiceren Inhoud met de Universele Redacteur- leer hoe de Universele Redacteur inhoud publiceert en hoe uw apps de gepubliceerde inhoud kunnen behandelen.
Universele Architectuur van de Redacteur- Leer over de architectuur van de Universele Redacteur en hoe de gegevens tussen zijn diensten en lagen stromen.
Attributen en Types- leer over de gegevensattributen en de types die de Universele Redacteur vereist.
Universele Authentificatie van de Redacteur- leer hoe de Universele Redacteur voor authentiek verklaart.

recommendation-more-help