Editar el código fuente de los artículos del centro de ayuda

Con el editor de código fuente se puede editar la fuente HTML de los artículos y los bloques de contenido del centro de ayuda. Eso permite personalizar el contenido del centro de ayuda y aplicarle estilo de maneras que no son posibles con el editor WYSIWYG estándar.

Para mantener protegido el centro de ayuda y proporcionar la mejor experiencia a los usuarios finales, Zendesk limita el HTML que se puede usar en los artículos y los bloques de contenido.

En este artículo, se tratan los siguientes temas:

• HTML admitido
• Elementos contenedores vacíos de HTML
• HTML inseguro
• HTML desconocido
• Aplicar estilo al HTML en los artículos de ayuda
• Limitaciones de HTML para los bloques de contenido

HTML admitido

En esta sección se describen los elementos, atributos y contenido de HTML que se admiten en los artículos y bloques de contenido. Además de los atributos enumerados, los elementos de HTML de esta sección también son compatibles con los siguientes atributos globales:

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

Importante: Para los bloques de contenido, el editor de código fuente limita el uso de los atributos id y class. Si desea más información, consulte Limitaciones de HTML para los bloques de contenido.

Algunos elementos de HTML admiten el atributo style en línea, pero solo admiten declaraciones de estilo para propiedades específicas. Por ejemplo, el elemento span solo permite configurar las propiedades background-color o color usando un atributo style en línea. Estas propiedades se documentan como Estilos en línea permitidos.

Atención: En la mayoría de los casos, Zendesk recomienda utilizar clases CSS en lugar de estilos en línea para aplicar estilo al contenido del centro de ayuda. Consulte Aplicar estilo al HTML en los artículos de ayuda.

a

Atributos: href, target, title, name, rel

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

Contenido: @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: solo atributos globales

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

address

Atributos: solo atributos globales

Contenido: @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: solo atributos globales

Contenido: @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: solo atributos globales

caption

Atributos: solo atributos globales

Contenido: @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: solo atributos globales

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

code,

Atributos: solo atributos globales

Contenido: @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: solo atributos globales

Contenido: col

dd

Atributos: solo atributos globales

Contenido: @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: solo atributos globales

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

dfn

Atributos: solo atributos globales

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

div

Atributos: solo atributos globales

Contenido: @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: solo atributos globales

Contenido: dd, td

dt

Atributos: solo atributos globales

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

em

Atributos: solo atributos globales

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

figcaption

Atributos: solo atributos globales

Contenido: @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: solo atributos globales

Contenido: @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: solo atributos globales

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

h2

Atributos: solo atributos globales

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

h3

Atributos: solo atributos globales

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

h4

Atributos: solo atributos globales

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

h5

Atributos: solo atributos globales

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

h6

Atributos: solo atributos globales

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

hr

Atributos: solo atributos globales

iframe

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

Estilos en línea permitidos: aspect-ratio, width

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

Dominios permitidos para incrustar contenido: 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 en línea permitidos: height, width

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

ins

Atributos: cite, datetime

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

kbd

Atributos: solo atributos globales

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

li

Atributos: solo atributos globales

Contenido: @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

Contenido: li

p

Atributos: solo atributos globales

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

pre

Atributos: solo atributos globales

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

samp

Atributos: solo atributos globales

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

small

Atributos: solo atributos globales

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

origen

Atributos: src, type

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

span

Atributos: name

Estilos en línea permitidos: background-color, color

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

strong

Atributos: solo atributos globales

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

sub

Atributos: solo atributos globales

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

sup

Atributos: solo atributos globales

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

tabla

Atributos: solo atributos globales

Contenido: caption, colgroup, tbody, tfoot, thead, tr

tbody

Atributos: solo atributos globales

Contenido: tr

td

Atributos: colspan, rowspan

Estilos en línea permitidos: height, text-align, vertical-align, width

Contenido: @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: solo atributos globales

Contenido: tr

th

Atributos: colspan, rowspan, scope

Estilos en línea permitidos: height, text-align, vertical-align, width

Contenido: @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: solo atributos globales

Contenido: tr

tr

Atributos: solo atributos globales

Contenido: td, th

track

Atributos: default, kind, label, src, srclang

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

ul

Atributos: solo atributos globales

Contenido: li

var

Atributos: solo atributos globales

Contenido: @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

Contenido: source, track

Elementos contenedores vacíos de HTML

Zendesk elimina automáticamente la mayoría de los elementos contenedores vacíos, como i o span. Normalmente, estos elementos tienen que tener contenido para poder renderizarse. Zendesk no elimina las etiquetas p vacías; en su lugar, inserta   como el contenido del elemento. Ejemplo:

<p>&nbsp;</p>

HTML inseguro

De manera predeterminada, Zendesk considera que los siguientes elementos de HTML son inseguros.

Elementos de HTML inseguros

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

Manipular HTML inseguro en los artículos

Para los artículos, el editor de código fuente no elimina los elementos de HTML inseguros ni los atributos de HTML no admitidos, pero sí los excluye de las respuestas de HTTP que se usan para renderizar los artículos del centro de ayuda. En consecuencia, es posible que los artículos no se vean como deberían.

Permitir HTML inseguro en los artículos

Se puede anular la configuración predeterminada para permitir HTML inseguro en los artículos del centro de ayuda. Esta configuración no afecta el HTML inseguro en los bloques de contenido.

Advertencia: Si hace este cambio, el código potencialmente malicioso podrá ejecutarse cuando los usuarios abran un artículo en un navegador.

Para permitir HTML inseguro en respuestas en HTTP

1. En Guide, haga clic en el icono Configuración () en la barra lateral.
2. Bajo Seguridad, seleccione la opción Mostrar contenido inseguro.
3. Haga clic en Actualizar.

Manipular HTML inseguro en los bloques de contenido

Para los bloques de contenido, el editor de código fuente elimina los elementos de HTML inseguros y los atributos no admitidos. El contenido que se encuentra dentro de un elemento inseguro se coloca en un elemento p como se describe en HTML desconocido. No se puede permitir HTML inseguro en los bloques de contenido.

HTML desconocido

Los elementos de HTML no admitidos o inseguros se consideran desconocidos. Zendesk elimina las etiquetas desconocidas y coloca el contenido de las etiquetas en un elemento p.

Por ejemplo, el siguiente HTML contiene un elemento mytag desconocido.

<mytag>Hello world!</mytag>

En las respuestas de HTTP que se usan para renderizar el centro de ayuda, se elimina el elemento mytag, cuyo contenido se coloca en un elemento p.

<p>Hello world!</p>

Aplicar estilo al HTML en los artículos de ayuda

Siempre que sea posible, Zendesk recomienda usar el atributo class y las clases CSS relacionadas para aplicar estilo al HTML en los artículos del centro de ayuda. Las clases CSS deben definirse en el tema del centro de ayuda. Si desea más información, consulte Personalización del tema del centro de ayuda.

Al crear reglas de CSS para el tema del centro de ayuda, evite el uso de selectores anidados, como div.container > p > img. Este tipo de reglas son difíciles de mantener y pueden enfocarse en los elementos equivocados. En vez de eso, utilice selectores que apliquen estilo directamente a una clase, como .container-image. Luego agregue la clase directamente a los elementos HTML afectados usando el elemento class. Por ejemplo:

Evite usar el atributo style para aplicar estilos en línea a los elementos HTML. El estilo en línea es difícil de mantener y puede dar lugar a incoherencias.

Limitaciones de HTML para los bloques de contenido

Para los bloques de contenido, el editor de código fuente elimina los atributos id o class, con las siguientes excepciones:

• Las etiquetas de encabezado, como <h2>, conservan su atributo id.
• Las etiquetas <div> conservan su atributo class.