DocumentatieAEMTutorials voor AEMTutorials voor AEM as a Cloud Service

Instrument Reageren app om inhoud te bewerken met Universal Editor

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • tussenpersoon
  • Ontwikkelaar

Leer hoe u de React-app kunt gebruiken om de inhoud te bewerken met de Universal Editor.

Vereisten

U hebt opstelling het lokale ontwikkelmilieu zoals die in de vorige Lokale stap van de ontwikkelingsOpstellingwordt beschreven.

De kernbibliotheek van de universele editor opnemen

Laten we beginnen met het opnemen van de kernbibliotheek van de Universal Editor in de WKND Teams React-app. Het is een JavaScript-bibliotheek die de communicatielaag vormt tussen de bewerkte app en de Universal Editor.

Er zijn twee manieren om de kernbibliotheek van de Universal Editor op te nemen in de React-app:

  1. De moduleafhankelijkheid van de knoop van het npm- register, zie @adobe/Universal-editor-cors.
  2. Scripttag (<script>) in het HTML-bestand.

Voor deze zelfstudie gebruiken we de methode Scripttag.

  1. Installeer het react-helmet-async -pakket om de <script> -tag in de React-app te beheren.

    code language-bash 
    $ npm install react-helmet-async

  2. Werk het src/App.js -bestand van de React-app voor WKND-teams bij en voeg de kernbibliotheek van de Universal Editor toe.

    code language-javascript 
    ...
import { Helmet, HelmetProvider } from "react-helmet-async";

function App() {
return (
    <HelmetProvider>
        <div className="App">
            <Helmet>
                {/* AEM Universal Editor :: CORE Library
                  Loads the LATEST Universal Editor library
                */}
                <script
                    src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"
                    async
                />
            </Helmet>
            <Router>
                <header>
                    <Link to={"/"}>
                    <img src={logo} className="logo" alt="WKND Logo" />
                    </Link>
                    <hr />
                </header>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/person/:fullName" element={<Person />} />
                </Routes>
            </Router>
        </div>
    </HelmetProvider>
);
}

export default App;

Metagegevens toevoegen - inhoudsbron

Om de WKND Teams te verbinden Reageer app met de inhoudsbron voor het uitgeven, moet u verbindingsmeta-gegevens verstrekken. De Universal Editor-service gebruikt deze metagegevens om een verbinding met de inhoudsbron tot stand te brengen.

De verbindingsmetagegevens worden opgeslagen als <meta> -tags in het HTML-bestand. De syntaxis voor de verbindingsmeta-gegevens is als volgt:

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

Voeg de verbindingsmetagegevens toe aan de React-app van WKND-teams in de component <Helmet> . Werk het src/App.js -bestand bij met de volgende <meta> -tag. In dit voorbeeld is de inhoudsbron een lokale AEM-instantie die wordt uitgevoerd op https://localhost:8443 .

...
function App() {
return (
    <HelmetProvider>
        <div className="App">
            <Helmet>
                {/* AEM Universal Editor :: CORE Library
                    Loads the LATEST Universal Editor library
                */}
                <script
                    src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"
                    async
                />
                {/* AEM Universal Editor :: Connection metadata
                    Connects to local AEM instance
                */}
                <meta
                    name="urn:adobe:aue:system:aemconnection"
                    content={`aem:https://localhost:8443`}
                />
            </Helmet>
            ...
    </HelmetProvider>
);
}

export default App;

aemconnection biedt een korte naam voor de inhoudsbron. De volgende instrumentatie gebruikt de korte naam om naar de inhoudsbron te verwijzen.

Metagegevens toevoegen - lokale Universal Editor-serviceconfiguratie

In plaats van de Adobe-ontvangen Universele dienst van de Redacteur, wordt een lokale kopie van de Universele dienst van de Redacteur gebruikt voor lokale ontwikkeling. De lokale dienst bindt de Universele Redacteur en AEM SDK, zodat voegen de lokale Universele dienst meta-gegevens van de Redacteur aan de Reactie app van de Teams WKND toe.

Deze configuratie-instellingen worden ook opgeslagen als <meta> -tags in het HTML-bestand. De syntaxis voor de lokale Universal Editor-metagegevens is als volgt:

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

Voeg de verbindingsmetagegevens toe aan de React-app van WKND-teams in de component <Helmet> . Werk het src/App.js -bestand bij met de volgende <meta> -tag. In dit voorbeeld wordt de lokale Universal Editor-service uitgevoerd op https://localhost:8001 .

...

function App() {
  return (
    <HelmetProvider>
      <div className="App">
        <Helmet>
          {/* AEM Universal Editor :: CORE Library
              Loads the LATEST Universal Editor library
          */}
          <script
            src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"
            async
          />
          {/* AEM Universal Editor :: Connection metadata
              Connects to local AEM instance
          */}
          <meta
            name="urn:adobe:aue:system:aemconnection"
            content={`aem:https://localhost:8443`}
          />
          {/* AEM Universal Editor :: Configuration for Service
              Using locally running Universal Editor service
          */}
          <meta
            name="urn:adobe:aue:config:service"
            content={`https://localhost:8001`}
          />
        </Helmet>
        ...
    </HelmetProvider>
);
}
export default App;

Instrueer de React-componenten

Om de inhoud van de Teams uit te geven WKND Reageer app zoals teamtitel en teambeschrijving, moet u de componenten van het Antwoord van instrumenten voorzien. De instrumentatie betekent het toevoegen van relevante gegevensattributen (data-aue-*) aan de elementen van de HTML die u editable gebruikend de Universele Redacteur wilt maken. Voor meer informatie over gegevensattributen, zie Attributen en Types.

Bewerkbare elementen definiëren

Eerst definieert u de elementen die u wilt bewerken met de universele editor. In de React app van de Teams WKND, worden de teamtitel en de beschrijving opgeslagen in het Fragment van de Inhoud van het Team in AEM, zo de beste kandidaten voor het uitgeven.

Instrueer de component Teams Reageren om de teamtitel en beschrijving bewerkbaar te maken.

  1. Open het bestand src/components/Teams.js van de React-app voor WKND-teams.

  2. Voeg het attribuut data-aue-prop, data-aue-type en data-aue-label toe aan de teamtitel en beschrijvingselementen.

    code language-javascript 
    ...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    return (
        <div className="team">
            // AEM Universal Editor :: Instrumentation using data-aue-* attributes
            <h2 className="team__title" data-aue-prop="title" data-aue-type="text" data-aue-label="title">{title}</h2>
            <p className="team__description" data-aue-prop="description" data-aue-type="richtext" data-aue-label="description">{description.plaintext}</p>
            ...
        </div>
    );
}

export default Teams;

  3. Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat de elementen van de teamtitel en beschrijving bewerkbaar zijn.

    Universele Redacteur - WKND de Titel van Teams en Desc editable

  4. Als u de teamtitel of beschrijving probeert te bewerken via inline bewerken of de eigenschappencontrole, wordt een spinner weergegeven die wordt geladen, maar kunt u de inhoud niet bewerken. Omdat de Universele Redacteur zich niet van de AEM middeldetails voor het laden van en het bewaren van de inhoud bewust is.

    Universele Redacteur - het laden van de Titel en van het Bureau van de Teams van WKND

Samengevat, merken de bovengenoemde veranderingen de teamtitel en beschrijvingselementen zoals editable in de Universele Redacteur. Nochtans, kunt u niet (via gealigneerde of eigenschappen spoorstaaf) uitgeven en de veranderingen nog opslaan, voor dat moet u de AEM middeldetails toevoegen gebruikend het data-aue-resource attribuut. Laten we dat in de volgende stap doen.

Brondetails AEM definiëren

Als u de bewerkte inhoud wilt opslaan in AEM en ook als u de inhoud in de eigenschappenrails wilt laden, moet u de AEM-brongegevens opgeven voor de Universal Editor.

In dit geval, is het AEM middel de weg van het Fragment van de Inhoud van het Team, zodat voegen de middeldetails aan de Teams component van het Reageren op het hoogste niveau <div> element.

  1. Werk het src/components/Teams.js -bestand bij om de kenmerken data-aue-resource , data-aue-type en data-aue-label toe te voegen aan het element op hoofdniveau <div> .

    code language-javascript 
    ...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    // Render single Team
    function Team({ _path, title, shortName, description, teamMembers }) {
        // Must have title, shortName and at least 1 team member
        if (!_path || !title || !shortName || !teamMembers) {
            return null;
        }

      return (
        // AEM Universal Editor :: Instrumentation using data-aue-* attributes
        <div className="team" data-aue-resource={`urn:aemconnection:${_path}/jcr:content/data/master`} data-aue-type="reference" data-aue-label={title}>
        ...
        </div>
    );
    }
}
export default Teams;

    De waarde van het data-aue-resource attribuut is de AEM middelweg van het Fragment van de Inhoud van het Team. Het voorvoegsel urn:aemconnection: gebruikt de korte naam van de inhoudsbron die is gedefinieerd in de verbindingsmetagegevens.

  2. Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat het top-level element van het Team editable is maar de eigenschappen spoorstaaf laadt nog niet de inhoud. Op het netwerktabblad van de browser ziet u de fout 401 Niet-geautoriseerde voor de details -aanvraag waarmee de inhoud wordt geladen. Het probeert het IMS-token te gebruiken voor verificatie, maar de lokale AEM SDK ondersteunt IMS-verificatie niet.

    Universele Redacteur - WKND Team editable van Teams

  3. Om de 401 Onbevoegde fout te bevestigen, moet u de lokale AEM SDK authentificatiedetails aan de Universele Redacteur verstrekken gebruikend de kopballen van de Authentificatie optie in de Universele Redacteur. Als lokale AEM-SDK stelt u de waarde in op Basic YWRtaW46YWRtaW4= voor admin:admin -referenties.

    Universele Redacteur - voeg de Kopballen van de Authentificatie toe

  4. Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U ziet nu dat de eigenschappenrails de inhoud laden en u kunt de teamtitel en beschrijving inline bewerken of de eigenschappenrails gebruiken.

    Universele Redacteur - WKND Team editable van Teams

Onder de kap

De eigenschappen per spoor laden de inhoud van de AEM bron met behulp van de lokale Universal Editor-service. Gebruikend het netwerklusje van browser, kunt u het verzoek van de POST aan de lokale Universele dienst van de Redacteur (https://localhost:8001/details) zien om de inhoud te laden.

Wanneer u de inhoud bewerkt met inline bewerken of eigenschappenrails, worden de wijzigingen met de lokale Universal Editor-service weer opgeslagen in de AEM. Met het netwerktabblad van de browser kunt u de aanvraag van de POST voor het opslaan van de inhoud bekijken bij de lokale Universal Editor-service ( https://localhost:8001/update of https://localhost:8001/patch ).

Universele Redacteur - WKND Team editable van Teams

Het JSON-object voor aanvraaglading bevat de benodigde details, zoals de inhoudsserver (connections), het bronnenpad (target) en de bijgewerkte inhoud (patch).

Universele Redacteur - WKND Team editable van Teams

De bewerkbare inhoud uitbreiden

Laat de editable inhoud uitbreiden en de instrumentatie op de teamleden toepassen zodat u de teamleden kunt uitgeven gebruikend de eigenschappen spoorstaaf.

Laten we, net als hierboven, de relevante data-aue-* -kenmerken toevoegen aan de teamleden in de Teams React-component.

  1. Werk het src/components/Teams.js -bestand bij om gegevenskenmerken toe te voegen aan het <li key={index} className="team__member"> -element.

    code language-javascript 
    ...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    <div>
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
            {/* Render the referenced Person models associated with the team */}
            {teamMembers.map((teamMember, index) => {
                return (
                    // AEM Universal Editor :: Instrumentation using data-aue-* attributes
                    <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}>
                    <Link to={`/person/${teamMember.fullName}`}>
                        {teamMember.fullName}
                    </Link>
                    </li>
                );
            })}
        </ul>
    </div>
    ...
}
export default Teams;

    De waarde van het kenmerk data-aue-type is component omdat de teamleden worden opgeslagen als Person Inhoudsfragmenten in AEM en u kunt hiermee de beweegbare/verwijderbare delen van de inhoud aangeven.

  2. Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat de teamleden bewerkbaar zijn met de eigenschappen rail.

    Universele Redacteur - WKND de Leden van het Team van Teams editable

Onder de kap

Zoals hierboven, worden de inhoudsherwinning en het bewaren gedaan door de lokale Universele dienst van de Redacteur. De aanvragen /details , /update of /patch worden ingediend bij de lokale Universal Editor-service voor het laden en opslaan van de inhoud.

Inhoud toevoegen en verwijderen definiëren

Tot nu toe hebt u de bestaande inhoud bewerkbaar gemaakt, maar wat als u nieuwe inhoud wilt toevoegen? Laten wij de capaciteit toevoegen om teamleden aan het team toe te voegen of te schrappen WKND gebruikend de Universele Redacteur. De auteurs van de inhoud hoeven dus niet naar de AEM te gaan om teamleden toe te voegen of te verwijderen.

Nochtans, een snelle rechthoek, worden de leden van het Team WKND opgeslagen als Person Fragments van de Inhoud in AEM en met het Fragment van de Inhoud van het Team gebruikend het teamMembers bezit geassocieerd. Om de modeldefinitie in AEM bezoek mijn-projectte herzien.

  1. Maak eerst het componentdefinitiebestand /public/static/component-definition.json . Dit bestand bevat de componentdefinitie voor het Person Content Fragment. Met de insteekmodule aem/cf kunt u inhoudsfragmenten invoegen op basis van een model en een sjabloon met de standaardwaarden die u wilt toepassen.

    code language-json 
    {
    "groups": [
        {
        "title": "Content Fragments",
        "id": "content-fragments",
        "components": [
            {
            "title": "Person",
            "id": "person",
            "plugins": {
                "aem": {
                    "cf": {
                        "name": "person",
                        "cfModel": "/conf/my-project/settings/dam/cfm/models/person",
                        "cfFolder": "/content/dam/my-project/en",
                        "title": "person",
                        "template": {
                            "fullName": "New Person",
                            "biographyText": "This is biography of new person"
                            }
                        }
                    }
                }
            }
        ]
        }
    ]
}

  2. Raadpleeg vervolgens het bovenstaande componentdefinitiebestand in index.html van de WKND Team React-app. Werk de sectie public/index.html file <head> bij om het componentdefinitiebestand op te nemen.

    code language-html 
    ...
<script
    type="application/vnd.adobe.aue.component+json"
    src="/static/component-definition.json"
></script>
<title>WKND App - Basic GraphQL Tutorial</title>
</head>
...

  3. Werk ten slotte het bestand src/components/Teams.js bij om gegevenskenmerken toe te voegen. De sectie van LEDEN om als container voor de teamleden te handelen, laten wij data-aue-prop, data-aue-type, en data-aue-label attributen aan het <div> element toevoegen.

    code language-javascript 
    ...
function Teams() {
    const { teams, error } = useAllTeams();
    ...

    {/* AEM Universal Editor :: Team Members as container */}
    <div data-aue-prop="teamMembers" data-aue-type="container" data-aue-label="members">
        <h4 className="team__members-title">Members</h4>
        <ul className="team__members">
        {/* Render the referenced Person models associated with the team */}
        {teamMembers.map((teamMember, index) => {
            return (
            // AEM Universal Editor :: Instrumentation using data-aue-* attributes
            <li key={index} className="team__member" data-aue-resource={`urn:aemconnection:${teamMember?._path}/jcr:content/data/master`} data-aue-type="component" data-aue-label={teamMember.fullName}>
                <Link to={`/person/${teamMember.fullName}`}>
                {teamMember.fullName}
                </Link>
            </li>
            );
        })}
        </ul>
    </div>
    ...
}
export default Teams;

  4. Vernieuw de pagina Universal Editor in de browser die de React-app voor WKND-teams laadt. U kunt nu zien dat de sectie 0} LEDEN {als container dienst doet. U kunt nieuwe teamleden invoegen met de eigenschappen rail en het pictogram + .

    Universele Redacteur - de Leden van het Team van Teams van WKND nemen in

  5. Om een teamlid te schrappen, selecteer het teamlid en klik het pictogram van de Schrapping.

    Universele Redacteur - de Leden van het Team van Teams van WKND schrappen

Onder de kap

De inhoud voegt en schrapt verrichtingen toe worden gedaan door de lokale Universele dienst van de Redacteur. De POST van /add of /remove met een gedetailleerde lading wordt gemaakt aan de lokale Universele dienst van de Redacteur voor het toevoegen van of het schrappen van de inhoud aan de AEM.

Oplossingsbestanden

Om uw implementatieveranderingen te verifiëren of als u niet de Reageer app die van de Teams WKND met de Universele Redacteur werkt kunt krijgen, verwijs naar basis-tutorial-instrumentented-for-UEoplossingstak.

De vergelijking van dossier-door-dossier met de werkende tak 0} basis-tutorial {is hier 🔗 beschikbaar.

Gefeliciteerd

U hebt met succes van instrumenten voorzien de WKND Teams React app om de inhoud toe te voegen, uit te geven en te schrappen gebruikend de Universele Redacteur. U hebt geleerd hoe te om de kernbibliotheek te omvatten, verbinding en de lokale Universele dienst meta-gegevens van de Redacteur toe te voegen, en de component van het Reageren te instrumenten gebruikend diverse gegevens (data-aue-*) attributen.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69