DocumentaçãoAEM 6.5Guia do usuário

O Editor universal universal-editor

Last update: Tue Nov 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Desenvolvedor

Saiba mais sobre a flexibilidade do Universal Editor e como ele pode ajudar a potencializar suas experiências headless usando o AEM 6.5.

Visão geral overview

O Universal Editor é um editor visual versátil que faz parte do Adobe Experience Manager Sites. Ele permite que os autores façam a edição "o que você vê é o que você obtém" (WYSIWYG) de qualquer experiência headless.

  • Os autores se beneficiam da flexibilidade do Universal Editor, pois ele oferece suporte à mesma edição visual consistente para todas as formas de conteúdo headless AEM.
  • Os desenvolvedores se beneficiam da versatilidade do Universal Editor, pois ele também suporta a verdadeira dissociação da implementação. Ele permite que os desenvolvedores utilizem praticamente qualquer estrutura ou arquitetura de sua escolha, sem impor restrições de SDK ou tecnologia.

Consulte a documentação do AEM as a Cloud Service sobre o Universal Editor para obter mais detalhes.

Arquitetura architecture

O Universal Editor é um serviço que trabalha em conjunto com o AEM para criar conteúdo de forma headless.

  • O Editor Universal está hospedado em https://experience.adobe.com/#/aem/editor/canvas e pode editar páginas renderizadas pelo AEM 6.5.
  • A página AEM é lida pelo Editor universal por meio do dispatcher da instância do autor AEM.
  • O Universal Editor Service, que é executado no mesmo host da Dispatcher, grava as alterações de volta na instância do autor AEM.

Fluxo de autor usando o Editor Universal

Configurar setup

Para testar o Editor universal, será necessário:

  1. Atualize e configure sua instância de criação do AEM.
  2. Configurar um Serviço do Editor Universal local.
  3. Ajuste o dispatcher para permitir o Universal Editor Service.

Após concluir a instalação, você pode instrumentar seus aplicativos para usar o Editor Universal.

Atualizar AEM update-aem

O Service Pack 21 ou 22 e um pacote de recursos para AEM são necessários para usar o Editor universal com AEM 6.5.

Aplicar Service Pack Mais Recente latest

Verifique se você está executando pelo menos o service pack 21 ou 22 para AEM 6.5. Você pode baixar o service pack mais recente em Distribuição de software.

Instalar o Pacote de Recursos do Universal Editor feature-pack

Instale o Pacote de Recursos do Universal Editor para AEM 6.5 disponível na Distribuição de Software.

Se você já estiver executando o service pack 23 ou superior, o pacote de recursos não será necessário.

Configurar serviços configure-services

O pacote de recursos instala vários novos pacotes para os quais são necessárias configurações adicionais.

  1. Abra o Gerenciador de configurações.
    • http://<host>:<port>/system/console/configMgr
  2. Localize o Manipulador de autenticação de token do Adobe Granite na lista e clique em Alterar os valores de configuração.
  3. Na caixa de diálogo, altere o atributo SameSite do cookie de token de logon (token.samesite.cookie.attr) para Partitioned.
  4. Clique em Salvar.

Remova a opção X-Frame de cabeçalhos SAMEORIGIN. sameorigin

  1. Abra o Gerenciador de configurações.
    • http://<host>:<port>/system/console/configMgr
  2. Localize o Apache Sling Main Servlet na lista e clique em Editar os valores de configuração.
  3. Exclua o valor X-Frame-Options=SAMEORIGIN do atributo (sling.additional.response.headers) Cabeçalhos de resposta adicionais se ele existir.
  4. Clique em Salvar.

Configure o Manipulador de autenticação do parâmetro de consulta do Adobe Granite. query-parameter

  1. Abra o Gerenciador de configurações.
    • http://<host>:<port>/system/console/configMgr
  2. Localize o Manipulador de Autenticação de Parâmetro de Consulta do Adobe Granite na lista e clique em Editar os valores de configuração.
  3. No campo Caminho (path), adicione / para habilitar.
    • Um valor vazio desativa o manipulador de autenticação.
  4. Clique em Salvar.

Defina para quais caminhos de conteúdo ou sling:resourceTypes o Editor Universal deve ser aberto. paths

  1. Abra o Gerenciador de configurações.

    • http://<host>:<port>/system/console/configMgr

  2. Localize o Serviço de URL do Editor Universal na lista e clique em Editar os valores de configuração.

  3. Defina para quais caminhos de conteúdo ou sling:resourceTypes o Editor Universal deve ser aberto.

    • No campo Mapeamento de Abertura do Editor Universal, forneça os caminhos para os quais o Editor Universal está aberto.
    • No Sling:resourceTypes, que deve ser aberto pelo Editor Universal, forneça uma lista de recursos que são abertos diretamente pelo Editor Universal.

  4. Clique em Salvar.

O AEM abrirá o Editor universal para páginas baseadas nessa configuração.

  1. O AEM verificará os mapeamentos em Universal Editor Opening Mapping e se o conteúdo estiver em algum caminho definido nele, o Editor Universal será aberto para ele.
  2. Para conteúdo não nos caminhos definidos em Universal Editor Opening Mapping, o AEM verifica se o resourceType do conteúdo corresponde aos definidos em Sling:resourceTypes, que devem ser abertos pelo Editor Universal, e se o conteúdo corresponder a um desses tipos, o Editor Universal será aberto para ele em ${author}${path}.html.
  3. Caso contrário, o AEM abrirá o Editor de páginas.

As variáveis a seguir estão disponíveis para definir seus mapeamentos em Universal Editor Opening Mapping.

  • path: Caminho de conteúdo do recurso a ser aberto
  • localhost: Entrada do externalizador para localhost sem esquema, ex.: localhost:4502
  • author: Entrada externalizadora para autor sem esquema, ex.: localhost:4502
  • publish: Entrada do externalizador para publicação sem esquema, ex.: localhost:4503
  • preview: Entrada do externalizador para visualização sem esquema, ex.: localhost:4504
  • env: prod, stage, dev com base nos modos de execução do Sling definidos
  • token: Token de consulta necessário para QueryTokenAuthenticationHandler

Exemplo de mapeamentos:

  • Abra todas as páginas em /content/foo no AEM Author:

    • /content/foo:${author}${path}.html?login-token=${token}
    • Isto resulta na abertura de https://localhost:4502/content/foo/x.html?login-token=<token>

  • Abrir todas as páginas em /content/bar em um servidor NextJS remoto, fornecendo todas as variáveis como informações

    • /content/bar:nextjs.server${path}?env=${env}&author=https://${author}&publish=https://${publish}&login-token=${token}
    • Isto resulta na abertura de https://nextjs.server/content/bar/x?env=prod&author=https://localhost:4502&publish=https://localhost:4503&login-token=<token>

Configurar o Serviço do Editor Universal set-up-ue

Com o AEM atualizado e configurado, você pode configurar um Serviço do Editor Universal local para desenvolvimento e teste locais.

  1. Instale o Node.js versão >=20.

  2. Baixe e descompacte o Serviço Universal Editor mais recente da Distribuição de Software

  3. Configure o Universal Editor Service por meio de variáveis de ambiente ou arquivo .env.

  4. Executar universal-editor-service.cjs

Atualizar o Dispatcher update-dispatcher

Com o AEM configurado e um serviço Editor Universal local em execução, será necessário permitir um proxy reverso para o novo serviço no Dispatcher.

  1. Ajuste o arquivo vhost da instância do autor para incluir um proxy reverso.

    code language-html 
    <IfModule mod_proxy.c>
 ProxyPass "/universal-editor" "http://localhost:8080"
 ProxyPassReverse "/universal-editor" "http://localhost:8080"
</IfModule>
    note note
    NOTE
    8080 é a porta padrão. Se você alterou isto usando o parâmetro UES_PORT em seu arquivo .env, ajuste o valor da porta aqui de acordo.

  2. Reinicie o Apache.

Instrumentar o aplicativo instrumentation

Com o AEM atualizado e um Universal Editor Service local em execução, você pode começar a editar conteúdo headless usando o Universal Editor.

No entanto, seu aplicativo deve ser instrumentado para aproveitar o Editor universal. Isso envolve a inclusão de metatags para instruir o editor sobre como e onde persistir o conteúdo. Os detalhes desta instrumentação estão disponíveis na documentação do Universal Editor para AEM as a Cloud Service.

Observe que, ao seguir a documentação do Universal Editor com AEM as a Cloud Service, as seguintes alterações se aplicam ao usá-lo com AEM 6.5.

  • O protocolo na meta tag deve ser aem65 em vez de aem.

    code language-html 
    <meta name="urn:adobe:aue:system:aemconnection" content={`aem65:${getAuthorHost()}`}/>

  • O ponto de extremidade do Serviço do Editor Universal deve ser anunciado por meio de uma meta tag.

    code language-html 
    <meta name="urn:adobe:aue:config:service" content={`${getAuthorHost()}/universal-editor`}/>

  • Na seção plugins da definição de componentes, deve ser usado aem65 em vez de aem.

TIP
Para obter um guia abrangente de introdução do Universal Editor para desenvolvedores, consulte o documento Visão geral do Universal Editor para desenvolvedores do AEM na documentação do AEM as a Cloud Service, tendo em mente as alterações necessárias para o suporte ao AEM 6.5, conforme mencionado nesta seção.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2