O editor de código-fonte permite editar a fonte HTML dos artigos e blocos de conteúdo da central de ajuda. Isso permite personalizar e estilizar o conteúdo da central de ajuda de maneiras que não são possíveis usando o editor WYSIWYG padrão.
Edição do código-fonte do artigo
Você pode personalizar os artigos da central de ajuda usando o editor de código-fonte de artigos para editar o HTML de seus artigos.
- Na central de ajuda ou na administração do Guide, crie ou edite um artigo ou bloco de conteúdo.
- No artigo ou bloco de conteúdo, clique no ícone de código-fonte (
) na barra de ferramentas. - No editor de código-fonte, crie ou edite o código-fonte que você deseja usar. Consulte HTML com suporte para artigos da central de ajuda para obter uma lista de elementos compatíveis.
- Clique em Aplicar para salvar suas edições e feche a visualização de código-fonte.
Limpeza de estilos no código-fonte do artigo
Quando você copia e cola conteúdo de uma página HTML na central de ajuda, pode acabar trazendo junto alguns estilos indesejados que bagunçam o código-fonte do artigo e comprometem a consistência da central de ajuda. Você pode usar o botão Limpar estilos no editor de código-fonte para remover quaisquer estilos embutidos que não sejam essenciais para o funcionamento do editor de artigo. O botão Limpar estilos não afeta as classes CSS nem os temas, além de não afetar os estilos embutidos que são necessários para o editor de artigos (por exemplo, a cor do texto e do plano de fundo e a altura e largura das células de tabelas).
- Na central de ajuda ou na administração do Guide, crie ou edite um artigo ou bloco de conteúdo.
- No artigo ou bloco de conteúdo, clique no ícone de código-fonte () na barra de ferramentas.
O editor de código-fonte é aberto, exibindo todo o código e os estilos embutidos.
- No editor de código-fonte, clique em Limpar estilos.
Os estilos embutidos incompatíveis são removidos da visualização do código-fonte.
- Clique em Aplicar para salvar suas edições e feche a visualização de código-fonte.
- Clique em Salvar para salvar as alterações.
Considerações importantes ao editar o código-fonte
Elementos de contêiner HTML vazios
O Zendesk remove automaticamente a maioria dos elementos de contêiner vazios, como i ou span. Esses elementos costumam conter conteúdo a ser renderizado. O Zendesk não remove tags p vazias. Em vez disso, o Zendesk insere como o conteúdo do elemento. Exemplo:
<p> </p>HTML não seguro
Por padrão, o Zendesk considera os seguintes elementos HTML como não seguros.
applet, button, embed, form, input, object, script, textarea, styleTratamento de HTML não seguro em artigos
Para os artigos, o editor de código-fonte não remove elementos HTML não seguros nem atributos HTML sem suporte. Em vez disso, eles são excluídos das respostas HTTP usadas para renderizar os artigos da central de ajuda. Como resultado, os artigos podem não ser exibidos como esperado.
Permissão para HTML não seguro em artigos
É possível substituir as configurações padrão para permitir HTML não seguro nos artigos da central de ajuda.
Advertência: essa alteração permitirá que códigos potencialmente mal-intencionados sejam executados quando os usuários abrirem um artigo no navegador.
Como permitir HTML não seguro em respostas de HTTP
- No Guide, clique no ícone Configurações (
) na barra lateral. - Em Segurança, selecione a opção Exibir conteúdo não seguro.
- Clique em Atualizar.
Tratamento de HTML não seguro em blocos de conteúdo
Para os blocos de conteúdo, o editor de código-fonte remove os elementos HTML não seguros e os atributos sem suporte. O conteúdo dentro de um elemento não seguro é colocado em um elemento p, conforme descrito em HTML desconhecido.
HTML desconhecido
Elementos HTML que não são compatíveis são considerados desconhecidos. O HTML não compatível é tratado de maneira diferente, com base em se você está editando um bloco de conteúdo ou artigo da central de ajuda.
Se você estiver editando um bloco de conteúdo, os blocos HTML reconhecerão o conteúdo incompatível e o colocarão em um bloco HTML. Você pode clicar no bloco HTML no editor de bloco de conteúdo para abrir um editor de código-fonte que exibe apenas o código desse bloco. Você pode usar essa visualização focada para manipular o HTML do conteúdo selecionado sem ter que percorrer pelo código-fonte de todo o bloco de conteúdo. Consulte Uso de blocos HTML para editar código em blocos de conteúdo.
mytag desconhecido.<mytag>Hello world!</mytag>Nas respostas HTTP usadas para renderizar a central de ajuda, o elemento mytag é removido. Em vez disso, seu conteúdo é colocado em um elemento p.
<p>Hello world!</p>Estilização do HTML em artigos de ajuda
Sempre que possível, a Zendesk recomenda o atributo class e as classes CSS relacionadas para estilizar o HTML nos artigos da central de ajuda. As classes CSS devem ser definidas no tema da central de ajuda. Para obter mais informações, consulte Personalização do tema da central de ajuda.
Ao criar regras CSS para o tema da sua central de ajuda, evite usar seletores aninhados, como div.container > p > img. Essas regras são difíceis de manter e podem mirar elementos não intencionais. Em vez disso, use seletores que estilizam diretamente uma classe, como .container-image. Então, adicione diretamente a classe aos elementos HTML afetados usando o elemento class. Por exemplo:
Evite usar o atributo style para aplicar estilização embutida a elementos HTML. A estilização embutida é difícil de manter e pode resultar em inconsistências.