Editar o código de origem no Editor de conteúdo avançado

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 2 min. de leitura

    • Modifique o código de origem HTML e CSS de todos os elementos na tela ou de um elemento específico.

    Crie o layout usando elementos HTML, edite diretamente o CSS de um elemento para adicionar um estilo que não está disponível de outra forma na interface da tela ou copie e cole o código para migrar conteúdo de outras origens.Adicionar uma borda ao redor de uma linha e personalizar a fonte do cabeçalho

    Recursos e capacidades

    Garanta a segurança do portal
    Quando você clica em Aplicar na janela Editar código, o editor de código remove marcadores HTML que podem ser usados para comprometer sua instância. Para obter mais informações, consulte HTML sanitizer.
    Identificar código importante
    A janela de edição realça os fragmentos de CSS em vermelho se eles não devem ser excluídos. Isso indica uma configuração que faz parte do tema do portal ou que vários elementos usam esse código.
    Além disso, se você excluir uma regra de CSS referenciada por um dos seguintes elementos HTML, o editor de código restabelecerá a regra de CSS:
    • Linha
    • Célula
    • Tela
    • Divisor
    • Botão
    • Bloco de link
    • Guias
    Remover código desnecessário
    Quando você salva suas mudanças, o editor de código remove todas as regras de CSS não utilizadas.
    Por outro lado, se o editor de código restabelecer uma regra de CSS que você está tentando remover, realce esse bloco de código CSS e clique no botão Remover CSS para substituir o editor de código.
    Figura 1. Exemplo de uso do botão Remover CSS

    No vídeo a seguir, o usuário tenta excluir uma regra de CSS usando a tecla delete, mas o sistema restaura o código. Em seguida, o usuário realça o código e clica em Remover CSS, o que remove o código com sucesso.

    O usuário tenta sem sucesso excluir uma regra de CSS usando a tecla de exclusão, portanto, ele usa o botão Remover CSS, que remove o código realçado
    Nota:
    Este recurso não está disponível por padrão. Um administrador deve habilitar a propriedade Editar código. Veja Propriedades instaladas com a Publicação de conteúdo

    Considerações importantes

    • Adicionar HTML e CSS personalizados pode prejudicar seu design. Prossiga com cuidado ao usar este recurso. O Editor de conteúdo avançado não rastreia mudanças no editor de código, portanto, o botão Desfazer não reverterá de forma confiável as mudanças de código.
    • Não recomendamos o uso de elementos HTML (como div ou p) para definir regras de CSS, pois isso pode ter consequências não intencionais.
      Figura 2. Exemplo de um resultado inesperado ao usar o elemento HTML para definir a regra de CSS

      No exemplo a seguir, o usuário define uma regra de CSS para o elemento p em uma célula. No entanto, na visualização da página, as regras de estilo se aplicam aos elementos p em todas as caixas de texto, bem como no rodapé.

      O usuário define uma regra de CSS usando o elemento HTML p para uma célula, mas a regra é aplicada em toda a página
    • Navegadores diferentes podem exibir comportamentos variados de copiar/colar. Se pressionar Ctrl + V não duplicar o conteúdo conforme o esperado, clique no ícone de duplicação na barra de ferramentas do componente.
    • Se o conteúdo copiado e colado não retiver seu estilo (por exemplo, fonte) e o ajuste das configurações não ajudar, limpe o estilo clicando no "x" ao lado do campo de estilo e defina o estilo.Remova o estilo personalizado clicando no "x" ao lado do campo de estilo
    • Se o conteúdo colado aparecer de forma diferente ao salvar, provavelmente algumas tags de script foram removidas pelo limpador de HTML.