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.
Editar el código fuente del artículo
Puede personalizar los artículos del centro de ayuda usando el editor de código fuente para editar el HTML de sus artículos.
- En el centro de ayuda o en el panel de administrador de Guide, cree o edite un artículo o un bloque de contenido.
- En el artículo o el bloque de contenido, haga clic en el icono del código fuente (
) en la barra de herramientas. - En el editor de código fuente, cree o edite el código fuente que desea usar. Consulte HTML admitido en artículos del centro de ayuda si desea ver una lista de los elementos admitidos.
- Haga clic en Aplicar para guardar sus cambios y cierre la vista del código fuente.
Limpiar los estilos del código fuente del artículo
Cuando se copia y pega contenido de una página HTML en un artículo de ayuda, es posible que se copien también estilos innecesarios que abarrotan el código fuente del artículo y ponen en riesgo la coherencia del centro de ayuda. Puede utilizar el botón Limpiar estilos en el editor de código fuente para eliminar los estilos incorporados que no son esenciales para que funcione el editor de artículos. El botón Limpiar estilos no afecta las clases CSS o los temas, ni tampoco afecta los estilos incorporados que se necesitan para el editor de artículos (por ejemplo, primer plano y segundo plano de las fuentes y anchos y altos de las celdas).
- En el centro de ayuda o en el panel de administrador de Guide, cree o edite un artículo o un bloque de contenido.
- En el artículo o el bloque de contenido, haga clic en el icono del código fuente () en la barra de herramientas.
Se abre el editor de código fuente y muestra todo el código y todos los estilos incorporados.
- En el editor de código fuente, haga clic en Limpiar estilos.
Los estilos incorporados no compatibles se eliminan de la vista del código fuente.
- Haga clic en Aplicar para guardar sus cambios y cierre la vista del código fuente.
- Haga clic en Guardar para guardar los cambios.
Consideraciones importantes al editar el código fuente
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> </p>HTML inseguro
De manera predeterminada, Zendesk considera que los siguientes elementos de HTML son inseguros.
applet, button, embed, form, input, object, script, textarea, styleManipular 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.
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
- En Guide, haga clic en el icono Configuración (
) en la barra lateral. - Bajo Seguridad, seleccione la opción Mostrar contenido inseguro.
- 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.
HTML desconocido
Los elementos HTML no admitidos se consideran desconocidos. El HTML no admitido se trata diferente según si se está editando un bloque de contenido o un artículo del centro de ayuda.
Si está editando un bloque de contenido, los bloques de HTML reconocen el contenido no admitido y lo encierran en un bloque de HTML. Puede hacer clic en el bloque de HTML en el editor de bloques de contenido para abrir un editor de código fuente que solo muestre el código para ese bloque. Esta vista enfocada se puede usar para manipular el HTML para el contenido seleccionado sin desplazarse por el código fuente para todo el bloque de contenido. Consulte Uso de bloques de HTML para editar código en los bloques de contenido.
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.