Edição do código-fonte dos artigos central de ajuda

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.

Para manter sua central de ajuda segura e fornecer a melhor experiência para o usuário final, o Zendesk limita o HTML que pode ser usado em artigos e blocos de conteúdo.

Este artigo abrange os seguintes tópicos:

• HTML compatível
• Elementos de contêiner HTML vazios
• HTML não seguro
• HTML desconhecido
• Estilização do HTML em artigos de ajuda
• Limitações do HTML em blocos de conteúdo

HTML compatível

Esta seção indica os elementos, atributos e conteúdo HTML compatíveis com os artigos e blocos de conteúdo. Além dos atributos indicados, os elementos HTML nesta seção também são compatíveis com os seguintes atributos globais:

id, class, aria-*, data-*, title

Importante: para blocos de conteúdo, o editor de fonte limita o uso dos atributos id e class. Para saber mais, consulte Limitações do HTML em blocos de conteúdo.

Alguns elementos HTML são compatíveis com o atributo style embutido, mas só têm suporte para declarações de estilo de propriedades específicas. Por exemplo, o elemento span só permite que você defina as propriedades background-color ou color usando um atributo style embutido. Essas propriedades são documentadas como estilos embutidos permitidos.

Atenção: na maioria dos casos, a Zendesk recomenda usar classes CSS em vez de estilos embutidos para estilizar o conteúdo da central de ajuda. Consulte Estilização do HTML em artigos de ajuda.

a

Atributos: href, target, title, name, rel

Protocolos permitidos para href: http, https, mailto, ftp, sftp, sms, tel

Conteúdo: @text, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

abbr

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

address

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

blockquote

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

br

Atributos: somente atributos globais

caption

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

cite

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

code

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

col

Atributos: span

colgroup

Atributos: somente atributos globais

Conteúdo: col

dd

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

del

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

dfn

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

div

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

dl

Atributos: somente atributos globais

Conteúdo: dd, td

dt

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

em

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

figcaption

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

figure

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figcaption, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

h1

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h2

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h3

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h4

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h5

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

h6

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

hr

Atributos: somente atributos globais

iframe

Atributos: src, allow, allowfullscreen, mozallowfullscreen, webkitallowfullscreen, oallowfullscreen, msallowfullscreen, name, class, width, height, frameborder

Estilos embutidos permitidos: aspect-ratio, width

Protocolos permitidos para src: http, https, blob, data

Domínios permitidos para embeds: https://content.jwplatform.com/, https://fast.wistia.com/, https://play.vidyard.com/, https://player.vimeo.com/, https://players.brightcove.net/, https://web.microsoftstream.com/, https://www.loom.com/, https://www.microsoft.com/, https://www.youtube-nocookie.com/, https://www.youtube.com/

img

Atributos: src, alt, name

Estilos embutidos permitidos: height, width

Protocolos permitidos para src: http, https, blob, data

ins

Atributos: cite, datetime

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

kbd

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

li

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

ol

Atributos: start, type, reversed

Conteúdo: li

p

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

pre

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

samp

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

small

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

source

Atributos: src, type

Protocolos permitidos para src: http, https, blob, data

span

Atributos: name

Estilos embutidos permitidos: background-color, color

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

strong

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

sub

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

sup

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

tabela

Atributos: somente atributos globais

Conteúdo: caption, colgroup, tbody, tfoot, thead, tr

tbody

Atributos: somente atributos globais

Conteúdo: tr

td

Atributos: colspan, rowspan

Estilos embutidos permitidos: height, text-align, vertical-align, width

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

tfoot

Atributos: somente atributos globais

Conteúdo: tr

th

Atributos: colspan, rowspan, scope

Estilos embutidos permitidos: height, text-align, vertical-align, width

Conteúdo: @text, a, abbr, address, blockquote, br, cite, code, del, dfn, div, dl, em, figure, h1, h2, h3, h4, h5, h6, hr, iframe, img, ins, kbd, ol, p, pre, samp, small, span, strong, sub, sup, table, ul, var, video

thead

Atributos: somente atributos globais

Conteúdo: tr

tr

Atributos: somente atributos globais

Conteúdo: td, th

track

Atributos: default, kind, label, src, srclang

Protocolos permitidos para src: http, https, blob, data

ul

Atributos: somente atributos globais

Conteúdo: li

var

Atributos: somente atributos globais

Conteúdo: @text, a, abbr, br, cite, code, del, dfn, em, iframe, img, ins, kbd, samp, small, span, strong, sub, sup, var, video

video

Atributos: src, height, width, controls

Protocolos permitidos para src: http, https, blob, data

Conteúdo: source, track

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>&nbsp;</p>

HTML não seguro

Por padrão, o Zendesk considera os seguintes elementos HTML como não seguros.

Elementos HTML não seguros

applet, button, embed, form, input, object, script, textarea, style

Tratamento 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. Essa configuração não afeta o uso de HTML não seguro nos blocos de conteúdo.

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

1. No Guide, clique no ícone Configurações () na barra lateral.
2. Em Segurança, selecione a opção Exibir conteúdo não seguro.
3. 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. Não é possível permitir HTML não seguro em blocos de conteúdo.

HTML desconhecido

Qualquer elemento HTML incompatível ou não seguro é considerado desconhecido. O Zendesk remove qualquer tag desconhecida e coloca seu conteúdo em um elemento p.

Por exemplo, o HTML a seguir contém um elemento 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.

Limitações do HTML em blocos de conteúdo

Para os blocos de conteúdo, o editor de código-fonte remove quaisquer atributos id ou class, com as seguintes exceções:

• Tags de cabeçalho, como <h2>, retêm seu atributo id.
• Tags <div> retêm seu atributo class.