Personalização e extensão do Editor universal customizing-extending

Saiba mais sobre os diferentes pontos de extensão e outros recursos que permitem personalizar a experiência de criação do Editor universal para atender às necessidades dos autores de conteúdo.

Visão geral overview

O Editor universal permite dois tipos de adaptação para as necessidades do seu projeto.

Ambos os tipos são detalhados nas seções a seguir.

Personalização do Editor universal customizing

O Editor universal oferece várias opções integradas para personalizar sua funcionalidade.

Desabilitar publicação disable-publish

Determinados workflows de criação exigem que o conteúdo seja revisado antes de ser publicado. Nessas situações, a opção de publicar não deve estar disponível para nenhum autor.

Portanto, o botão Publish pode ser totalmente suprimido em um aplicativo adicionando os seguintes metadados.

<meta name="urn:adobe:aue:config:disable" content="publish"/>

Componentes de filtragem filtering-components

Ao usar o Editor universal, é possível restringir os componentes permitidos por componente do contêiner. Para fazer isso, é necessário introduzir uma tag de script adicional, que aponta para a definição do filtro.

<script type="application/vnd.adobe.aue.filter+json" src="/static/filter-definition.json"></script>

Uma definição de filtro pode ser semelhante à seguinte, o que restringiria um contêiner para permitir apenas a adição de texto e imagens.

[
  {
    "id": "container-filter",
     "components": ["text", "image"]
   }
]

Em seguida, você pode fazer referência à definição de filtro a partir do componente de contêiner adicionando a propriedade data-aue-filter, transmitindo a ID do filtro definido anteriormente.

data-aue-filter="container-filter"

Definir o atributo components em uma definição de filtro como null permite todos os componentes, como se não houvesse filtros.

[
  {
    "id": "another-container-filter",
     "components": null
   }
]

Mostrar e ocultar componentes condicionalmente no painel Propriedades conditionally-hide

Embora um componente ou componentes possam estar disponíveis para os autores, pode haver certas situações em que isso não faça sentido. Nesses casos, você pode ocultar componentes no painel de propriedades adicionando um atributo condition aos campos do modelo de componente.

As condições podem ser definidas usando o esquema JsonLogic . Se a condição for verdadeira, o campo será exibido. Se a condição for falsa, o campo ficará oculto.

Modelo de amostra

code language-json
{ "id": "conditionally-revealed-component", "fields": [ { "component": "boolean", "label": "Shall the text field be revealed?", "name": "reveal", "valueType": "boolean" }, { "component": "text-input", "label": "Hidden text field", "name": "hidden-text", "valueType": "string", "condition": { "===": [{"var" : "reveal"}, true] } } ] }

Condição falsa

Condição Verdadeira

URLs de visualização personalizados custom-preview-urls

Você pode especificar uma URL de visualização personalizada por meio de uma metaconfiguração urn:adobe:aue:config:preview, que será aberta ao clicar no botão Abrir página na barra de ferramentas superior direita do editor .

Isso é particularmente útil para aplicativos com requisitos de visualização específicos, como os que usam Edge Delivery Services com criação no WYSIWYG.

Para fazer isso, basta incluir o URL de visualização desejado em uma meta tag do aplicativo instrumentado, como no exemplo a seguir.

<meta name="urn:adobe:aue:config:preview" content="https://wknd.site"/>

Extensão da interface do editor universal extending

Como um serviço do Adobe Experience Cloud, a interface do editor universal pode ser estendida usando o App Builder e o Experience Manager.

As extensões de interface do usuário são aplicativos do JavaScript criados com o Adobe App Builder que podem ser incorporados em aplicativos de interface do usuário executados no Adobe Experience Cloud Unified Shell, como o Editor universal. Você pode adicionar seus próprios botões e ações ao menu de cabeçalho e ao painel de propriedades, bem como criar seus próprios eventos para o Editor universal.

Se você quiser explorar essas possibilidades, consulte os seguintes recursos:

Usando o Extension Manager no AEM Sites, você pode habilitar ou desabilitar suas extensões por instância, acessar extensões próprias do Adobe, inclusive as do Universal Editor, e muito mais.