Documentação AEM Tutoriais do AEM Tutoriais do AEM as a Cloud Service

Instrumentar o aplicativo React para editar conteúdo usando o Editor universal

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Aplica-se a:
Experience Manager as a Cloud Service

Criado para:

Intermediário
Desenvolvedor

Saiba como instrumentar o aplicativo React para editar o conteúdo usando o Universal Editor.

Pré-requisitos

Você configurou o ambiente de desenvolvimento local conforme descrito na etapa anterior de configuração de desenvolvimento local.

Incluir a biblioteca principal do Editor Universal

Vamos começar incluindo a biblioteca principal do Editor universal no aplicativo WKND Teams React. É uma biblioteca do JavaScript que fornece a camada de comunicação entre o aplicativo editado e o Editor universal.

Há duas maneiras de incluir a biblioteca principal do Editor universal no aplicativo React:

Dependência do módulo do nó do registro npm, consulte @adobe/universal-editor-cors.
Marca de script (<script>) no arquivo HTML.

Para este tutorial, vamos usar a abordagem Tag de script.

Instale o pacote react-helmet-async para gerenciar a marca <script> no aplicativo React.

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

Atualize o arquivo src/App.js do aplicativo WKND Teams React para incluir a biblioteca principal do Universal Editor.

code language-javascript

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;

...
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;

Adicionar metadados - fonte de conteúdo

Para conectar o aplicativo WKND Teams React à fonte de conteúdo para edição, é necessário fornecer metadados de conexão. O serviço do Editor universal usa esses metadados para estabelecer uma conexão com a fonte de conteúdo.

Os metadados da conexão são armazenados como <meta> tags no arquivo HTML. A sintaxe dos metadados da conexão é a seguinte:

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

Vamos adicionar os metadados da conexão ao aplicativo WKND Teams React dentro do componente <Helmet>. Atualize o arquivo src/App.js com a seguinte marca <meta>. Neste exemplo, a fonte de conteúdo é uma instância do AEM local em execução em 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;

O aemconnection fornece um nome curto para a fonte de conteúdo. A instrumentação subsequente usa o nome curto para se referir à fonte de conteúdo.

Adicionar metadados - configuração de serviço local do Editor Universal

Em vez do serviço do Editor universal hospedado na Adobe, uma cópia local do serviço do Editor universal é usada para desenvolvimento local. O serviço local vincula o Editor universal e o AEM SDK, então, vamos adicionar os metadados do serviço Editor universal local ao aplicativo WKND Teams React.

Essas definições de configuração também são armazenadas como <meta> tags no arquivo HTML. A sintaxe dos metadados do serviço Editor universal local é a seguinte:

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

Vamos adicionar os metadados da conexão ao aplicativo WKND Teams React dentro do componente <Helmet>. Atualize o arquivo src/App.js com a seguinte marca <meta>. Neste exemplo, o serviço do Editor Universal local está em execução em 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;

Instrumentar os componentes do React

Para editar o conteúdo do aplicativo WKND Teams React, como título da equipe e descrição da equipe, é necessário instrumentar os componentes do React. A instrumentação significa adicionar atributos de dados relevantes (data-aue-*) aos elementos HTML que você deseja tornar editáveis usando o Editor Universal. Para obter mais informações sobre atributos de dados, consulte Atributos e Tipos.

Definir elementos editáveis

Vamos começar definindo os elementos que você deseja editar usando o Editor universal. No aplicativo WKND Teams React, o título e a descrição da equipe são armazenados no Fragmento de conteúdo da equipe no AEM, portanto, são os melhores candidatos para edição.

Vamos instrumentar o componente do React Teams para tornar editáveis o título e a descrição da equipe.

Abra o arquivo src/components/Teams.js do aplicativo WKND Teams React.

Adicione o atributo data-aue-prop, data-aue-type e data-aue-label ao título da equipe e aos elementos de descrição.

code language-javascript

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;`

...
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;

Atualize a página do Editor universal no navegador que carrega o aplicativo WKND Teams React. Agora é possível ver que o título da equipe e os elementos de descrição são editáveis.
Se você tentar editar o título ou a descrição da equipe usando a edição em linha ou o painel de propriedades, ele mostrará um ponteiro de carregamento, mas não permitirá a edição do conteúdo. Porque o Editor universal não está ciente dos detalhes dos recursos do AEM para carregar e salvar o conteúdo.

Em resumo, as alterações acima marcam o título da equipe e os elementos de descrição como editáveis no Editor universal. No entanto, você não pode editar (por meio do painel de propriedades ou incorporado) e salvar as alterações ainda, pois é necessário adicionar os detalhes do recurso do AEM usando o atributo data-aue-resource. Vamos fazer isso na próxima etapa.

Definir detalhes de recursos do AEM

Para salvar o conteúdo editado de volta no AEM e também para carregar o conteúdo no painel de propriedades, é necessário fornecer os detalhes de recursos do AEM ao Editor universal.

Nesse caso, o recurso AEM é o caminho do Fragmento do conteúdo da equipe, então vamos adicionar os detalhes do recurso ao componente React Teams no elemento <div> de nível superior.

Atualize o arquivo src/components/Teams.js para adicionar os atributos data-aue-resource, data-aue-type e data-aue-label ao elemento <div> de nível superior.

code language-javascript

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;

...
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;

O valor do atributo data-aue-resource é o caminho do recurso AEM do Fragmento de conteúdo da equipe. O prefixo urn:aemconnection: usa o nome curto da fonte de conteúdo definido nos metadados da conexão.

Atualize a página do Editor universal no navegador que carrega o aplicativo WKND Teams React. Agora é possível ver que o elemento Equipe de nível superior é editável, mas o painel de propriedades ainda não está carregando o conteúdo. Na guia Rede do navegador, você pode ver o erro 401 Não autorizado para a solicitação details que carrega o conteúdo. Ele está tentando usar o token IMS para autenticação, mas o AEM SDK local não é compatível com a autenticação IMS.
Para corrigir o erro 401 Não autorizado, você precisa fornecer os detalhes de autenticação do AEM SDK local ao Universal Editor usando a opção Cabeçalhos de autenticação no Universal Editor. Como AEM SDK local, defina o valor para Basic YWRtaW46YWRtaW4= para as credenciais admin:admin.
Atualize a página do Editor universal no navegador que carrega o aplicativo WKND Teams React. Agora é possível ver que o painel de propriedades está carregando o conteúdo e editar o título da equipe e a descrição em linha ou usando o painel de propriedades.

Sob o capô

O painel de propriedades carrega o conteúdo do recurso do AEM usando o serviço local do Editor universal. Usando a guia de rede do navegador, você pode ver a solicitação POST para o serviço local do Universal Editor (https://localhost:8001/details) para carregar o conteúdo.

Ao editar o conteúdo usando a edição em linha ou o painel de propriedades, as alterações são salvas de volta no recurso do AEM usando o serviço local do Universal Editor. Usando a guia de rede do navegador, você pode ver a solicitação POST para o serviço local do Universal Editor (https://localhost:8001/update ou https://localhost:8001/patch) para salvar o conteúdo.

Editor Universal - Equipe WKND editável

O objeto JSON da carga da solicitação contém os detalhes necessários, como o servidor de conteúdo (connections), o caminho do recurso (target) e o conteúdo atualizado (patch).

Editor Universal - Equipe WKND editável

Expandir o conteúdo editável

Vamos expandir o conteúdo editável e aplicar a instrumentação aos membros da equipe para que você possa editar os membros da equipe usando o painel de propriedades.

Como acima, vamos adicionar os atributos data-aue-* relevantes aos membros da equipe no componente React Teams.

Atualize o arquivo src/components/Teams.js para adicionar atributos ao elemento <li key={index} className="team__member">.

code language-javascript

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;

...
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;

O valor do atributo data-aue-type é component, já que os membros da equipe são armazenados como Person Fragmentos de conteúdo no AEM e ajuda a indicar as partes móveis/excluíveis do conteúdo.

Atualize a página do Editor universal no navegador que carrega o aplicativo WKND Teams React. Agora é possível ver que os membros da equipe podem ser editados usando o painel de propriedades.

Sob o capô

Como acima, a recuperação e o salvamento de conteúdo são feitos pelo serviço local do Universal Editor. As solicitações /details, /update ou /patch são feitas ao serviço local do Universal Editor para carregar e salvar o conteúdo.

Definir como adicionar e excluir conteúdo

Até agora, você tornou o conteúdo existente editável, mas e se quiser adicionar novo conteúdo? Vamos adicionar a capacidade de adicionar ou excluir membros da equipe à equipe WKND usando o Editor universal. Portanto, os autores de conteúdo não precisam acessar o AEM para adicionar ou excluir membros da equipe.

No entanto, uma recapitulação rápida, os membros da equipe da WKND são armazenados como Person fragmentos de conteúdo no AEM e associados ao fragmento de conteúdo da equipe usando a propriedade teamMembers. Para revisar a definição do modelo na AEM, visite my-project.

Primeiro, crie o arquivo de definição de componente /public/static/component-definition.json. Este arquivo contém a definição de componente para o Fragmento de conteúdo Person. O plug-in aem/cf permite a inserção de fragmentos de conteúdo, com base em um modelo e um modelo fornecendo os valores padrão a serem aplicados.

code language-json

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

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

Em seguida, consulte o arquivo de definição de componente acima em index.html do Aplicativo WKND Team React. Atualize a seção <head> do arquivo public/index.html para incluir o arquivo de definição de componente.

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> ...`

Finalmente, atualize o arquivo src/components/Teams.js para adicionar atributos de dados. A seção MEMBROS para atuar como um contêiner para os membros da equipe, vamos adicionar os atributos data-aue-prop, data-aue-type e data-aue-label ao elemento <div>.

code language-javascript

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;

...
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;

Atualize a página do Editor universal no navegador que carrega o aplicativo WKND Teams React. Agora você pode ver que a seção MEMBROS atua como um contêiner. É possível inserir novos membros da equipe usando o painel de propriedades e o ícone +.
Para excluir um membro da equipe, selecione-o e clique no ícone Excluir.

Sob o capô

As operações de adição e exclusão de conteúdo são realizadas pelo serviço local do Universal Editor. A solicitação POST para /add ou /remove com uma carga detalhada é feita ao serviço local do Universal Editor para adicionar ou excluir o conteúdo da AEM.

Arquivos de solução

Para verificar as alterações de implementação ou se não conseguir fazer com que o aplicativo WKND Teams React funcione com o Universal Editor, consulte a ramificação da solução basic-tutorial-instrumented-for-UE.

A comparação arquivo a arquivo com a ramificação de trabalho tutorial-básico está disponível aqui.

Parabéns

Você instrumentou com êxito o aplicativo WKND Teams React para adicionar, editar e excluir o conteúdo usando o Editor universal. Você aprendeu a incluir a biblioteca principal, adicionar conexão e os metadados de serviço do editor universal local e instrumentar o componente React usando vários atributos de dados (data-aue-*).

recommendation-more-help

4859a77c-7971-4ac9-8f5c-4260823c6f69