# La etiqueta "button" de HTML5 se muestra en la vista previa del editor, pero no en las publicaciones renderizadas

**URL:** https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811
**Category:** Bug
**Created:** [25 Marzo, 2025 18:39 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811 "2025-03-25T18:39:39Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [25 Marzo, 2025 18:39 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/1 "2025-03-25T18:39:39Z")

</div>

#### Problema

Después de guardar el contenido de la publicación, se renderiza durante aproximadamente 4 ms en la publicación renderizada, antes de que aparezca un círculo de carga durante 2 ms, y desaparece:

> **[Why do \`\` tags render in the preview, but not the rendered post?](https://discuss.kde.org/t/why-do-button-tags-render-in-the-preview-but-not-the-rendered-post/32028/3?u=rokejulianlockhart)**
>
> Yeah, it’s upstream. \[1\] Didn’t think to check. Thanks: web.archive.org’s copy of try.discourse.org/t/1500/1 \[2\] ↩︎ meta.discourse.org/t/257782/2 ↩︎

#### Soluciones

Si su renderizado en el previsualizador es accidental, y su eliminación de la publicación renderizada es deliberada debido a preocupaciones de seguridad que desconozco, ¿no podría al menos reemplazar `\u003cbutton\u003e` con `\u003cbutton disabled\u003e`?

Pregunto porque veo un uso frecuente de `\u003ccode\u003e` y `\u003ckbd\u003e` donde `\u003cbutton\u003e` sería semántico, especialmente en tutoriales y pasos de reproducción.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [25 Marzo, 2025 21:21 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/2 "2025-03-25T21:21:27Z")

</div>

No estoy seguro de si es un error en sí. Entiendo tu confusión.

Para evitar que las etiquetas y atributos/nombres de clase HTML sean filtrados, esto debe permitirse explícitamente en el núcleo de Discourse o en un plugin.

Por ejemplo, una lista predeterminada se puede encontrar aquí:

> <https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115>

También es posible permitir una etiqueta solo para la vista previa. Por ejemplo, los controles de imagen tienen varias combinaciones de etiquetas/nombres de clase/atributos.

> <https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js#L198>

Ves el botón en la vista previa porque es un efecto secundario de la etiqueta que se permite aquí.  
Sin embargo, el atributo `disabled` se ignora porque no está definido.

> <https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-markdown-it/src/features/image-controls.js#L223>

No comprobé cómo se analiza la lista de permitidos, me pregunto si es el comportamiento esperado. 🤔. Actualmente, parece que la etiqueta se permite independientemente de los atributos. Habría esperado que el botón no se renderizara si no se usa exactamente, por ejemplo, `<button class="alt-text-edit-ok btn btn-primary">`.

Puedes crear un plugin para permitir `<button>` en la publicación después de renderizar. Hazme saber si necesitas ayuda.

---

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [25 Marzo, 2025 23:29 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/3 "2025-03-25T23:29:24Z")

</div>

> [@Arkshine](#):
>
> Puedes hacer un plugin para permitir `\u003cbutton\u003e` en la renderización de la publicación. Avísame si necesitas ayuda.

@Arkshine, estoy agradecido. Sin embargo, no soy un operador de instancia. Simplemente he notado esto al formular contenido.

Este es uno de los muchos casos en los que las representaciones HTML5 y CSS3 en el previsualizador difieren de la renderización final, lo que significa que escribir contenido para Discourse puede ser difícil. Esto es especialmente cierto cuando las ediciones se han deshabilitado o limitado a un período de tiempo muy corto, en toda la instancia.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [26 Marzo, 2025 03:25 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/4 "2025-03-26T03:25:00Z")

</div>

¡Entiendo; tiene sentido! Estoy de acuerdo en que no es una buena experiencia.

Si quieres, hice este pequeño plugin para permitir `\u003cbutton\u003e` con el atributo `disabled`: [GitHub - Arkshine/discourse-markdown-allowlist](https://github.com/Arkshine/discourse-markdown-allowlist)

Desafortunadamente, no puedes hacer configuraciones en esta situación, así que si quieres añadir otra etiqueta, tendrás que bifurcar mi repositorio y añadirla tú mismo [aquí](https://github.com/Arkshine/discourse-markdown-allowlist/blob/main/assets/javascripts/lib/discourse-markdown/custom_allow_list.js#L6).

---

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [26 Marzo, 2025 08:52 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/5 "2025-03-26T08:52:42Z")

</div>

@Arkshine, ¿no se puede incluir eso en la versión principal? Pregunto porque esto afecta a todas las instancias que utilizo, y pedirles a todas que incorporen un parche para algo tan trivial para ellas probablemente sería inviable.

Normalmente, crearía un problema para algo como esto en el repositorio de GitHub correspondiente, pero la sección de problemas está deshabilitada para Discourse.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [26 Marzo, 2025 09:03 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/6 "2025-03-26T09:03:08Z")

</div>

¿Usar #Contribute > Feature aquí en lugar de GitHub? Porque #Contribute > Bug esto no lo es.

---

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [26 Marzo, 2025 09:32 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/7 "2025-03-26T09:32:11Z")

</div>

@Jagster, si esta etiqueta simplemente no estuviera disponible, lo haría. Sin embargo, que el visor previo no funcione como tal es un #Contribute > Bug.

¿Cómo clasificarías esto como una función? ¿Cómo reescribirías el título para demostrarlo?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [26 Marzo, 2025 09:45 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/8 "2025-03-26T09:45:39Z")

</div>

#Contribute > Feature es una categoría para funciones faltantes. #Contribute > Bug es para errores, y este no es un error.

¿Quizás te gustaría usarlo exactamente de la misma manera que usarías una sección de problemas en GitHub?

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [26 Marzo, 2025 09:59 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/9 "2025-03-26T09:59:53Z")

</div>

Creo que la inconsistencia entre las vistas previas y las publicaciones renderizadas es razonable considerarla como un #Contribute > Bug.

La solución probablemente sea bloquearla también en la vista previa, lo que significa que “añadir soporte para `<button>` en las publicaciones” sería una solicitud válida de #Contribute > Feature en el futuro 😉

---

<div class="post-metadata">

### Author: ![roke\_julian\_lockhart](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roke_julian_lockhart/32/540179_2.png) [@roke\_julian\_lockhart](https://meta.discourse.org/u/roke_julian_lockhart)
#### Post date: [26 Marzo, 2025 10:09 UTC](https://meta.discourse.org/t/the-button-html5-tag-renders-in-the-editor-previewer-but-not-rendered-posts/358811/10 "2025-03-26T10:09:12Z")

</div>

> [@david](#):
>
> La solución probablemente será bloquearlo también en la vista previa, lo que significa que “agregar soporte para `<button>` a las publicaciones” sería una solicitud válida de #Feature en el futuro 😉

De hecho, @david. Debería haber separado estos:

> [@Render \`\<button disabled\>\` in markdown](https://meta.discourse.org/t/render-button-disabled/358906?u=rokejulianlockhart):
>
> As stated in a relevant thread, where I was advised to separate this request from a bug in which the button renders in the previewer:

Disculpas y gracias.