DocumentaçãoAEM 6.5Guia do usuário

O Editor universal universal-editor

Last update: Fri Mar 13 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager 6.5

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 do 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 Editor universal é um serviço que trabalha em conjunto com o AEM para criar conteúdo em 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 do AEM é lida pelo Editor universal por meio do dispatcher da instância do autor do AEM.
  • O Universal Editor Service, que é executado no mesmo host que a Dispatcher, grava as alterações de volta na instância de autor do AEM.

Fluxo de autor usando o Editor Universal

Requisitos requirements

O Editor Universal é compatível com:

Este documento se concentra no suporte do AEM 6.5 ao Universal Editor. Para usar o Editor universal com o AEM 6.5, será necessário:

  • AEM 6.5 with service pack 23 or higher
  • Dispatcher properly configured
NOTE
*Se você usa o Adobe Managed Services (AMS), entre em contato com o engenheiro de sucesso do cliente (CSE) se desejar usar o Universal Editor.

Configurar setup

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

  1. Configurar um Serviço do Editor Universal local.
  2. 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.

Configure Services configure-services

The Universal Editor leverages several packages for which additional configuration is needed.

  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. Locate Apache Sling Main Servlet in the list and click Edit the configuration values.
  3. Exclua o valor X-Frame-Options=SAMEORIGIN do atributo () Cabeçalhos de resposta adicionaissling.additional.response.headers se ele existir.
  4. Clique em Salvar.

Configure o Manipulador de autenticação de 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.

Define for which content paths or sling:resourceTypes the Universal Editor shall be opened. paths

  1. Abra o Gerenciador de configurações.

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

  2. Locate Universal Editor URL Service in the list and click Edit the configuration values.

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

    • In the Universal Editor Opening Mapping field, provide the paths for which the Universal Editor is opened.
    • In the Sling:resourceTypes which shall be opened by Universal Editor field, provide a list of resources which are opened directly by the Universal Editor.

  4. Clique em Salvar.

  5. Check your externalizer configuration and ensure at a minimum you have the local, author, and publish environments set as in the following example.

    code language-text 
    "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]"

Once those configuration steps are complete, AEM will open the Universal Editor for pages in the following order.

  1. O AEM verificará os mapeamentos em Universal Editor Opening Mapping e se o conteúdo estiver em qualquer 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 Universal Editor e se o conteúdo corresponde a um desses tipos, o Universal Editor 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:

  • Abrir todas as páginas em /content/foo no Autor do AEM:

    • /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 local do Universal Editor 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

Update the Dispatcher update-dispatcher

With AEM configured and a local Universal Editor service running, you will need to allow a reverse proxy for the new service in the dispatcher.

  1. Adjust the vhost file of author instance to include a reverse proxy.

    code language-html 
    <IfModule mod_proxy.c>
 ProxyPass "/universal-editor" "http://localhost:8080"
 ProxyPassReverse "/universal-editor" "http://localhost:8080"
</IfModule>
    note note
    NOTE
    8080 is the default port. 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 Serviço do editor universal local em execução, você pode começar a editar conteúdo headless usando o editor universal.

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

Diferenças entre o AEM 6.5 e o AEM as a Cloud Service differences

O Editor universal no AEM 6.5 funciona amplamente da mesma forma que no AEM as a Cloud Service, incluindo a interface do usuário e grande parte da configuração. Há, no entanto, diferenças que devem ser observadas.

  • O Universal Editor no 6.5 é compatível apenas com o caso de uso headless.
  • Setup of the Universal Editor varies slightly for 6.5 (as described in the current document).
  • The Universal Editor in 6.5 uses a different asset picker and a different Content Fragment picker than AEM as a Cloud Service.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2