Bonanza de botones de Composer

:warning: El editor de texto enriquecido (de una sola ventana, WYSIWYG) está incompleto y aún no admite correctamente este componente de tema.

:information_source: Resumen Composer Button Bonanza permite a un administrador del sitio definir y agregar nuevos botones de formato a la barra de herramientas del Editor de Composición (Composer), y proporciona una gran cantidad de botones nuevos en su configuración predeterminada.
:hammer_and_wrench: Repositorio centertap/DiscourseComposerButtonBonanza - Codeberg.org
:eyes: Readme README.md
:spiral_notepad: Notas de Lanzamiento RELEASE-NOTES.md
:question: Guía de Instalación Cómo instalar un tema o componente de tema
:heart: Patrocinio Presentado por… CTAP
Este componente de tema es desarrollado por el Center for Transparent Analysis and Policy, una organización sin fines de lucro 501(c)(3). Si este componente es útil para su sitio, considere hacer una donación para apoyar a CTAP.

Instalar Composer Button Bonanza

“¡Facilidades de Composición que Puede Permitirse!”

Composer Button Bonanza es un componente de tema que proporciona más botones de formato para el Editor de Composición (Composer).

De fábrica, proporciona una gran cantidad de botones nuevos, un revoltijo de botones, una bonanza de botones. La configuración predeterminada agrega tres botones nuevos a la barra de herramientas (¿Puedes encontrarlos? :smile:), y oculta el resto detrás de un botón de alternancia en el menú emergente :gear: :

Después de hacer clic en el botón de alternancia, el resto de los botones se hacen visibles:

Mediante la configuración del componente de tema, usted puede:

  • agregar nuevas definiciones de botones (y/o eliminar las proporcionadas);
  • seleccionar qué botones mostrar y cuándo mostrarlos;
  • cambiar el orden de los botones y colocar botones en la barra de herramientas o en el menú emergente :gear: de la barra de herramientas;
  • proporcionar traducciones/localizaciones para los botones.

Este componente no define ningún formato o estilo, sino que simplemente agrega botones convenientes (¡facilidades!) para escribir el formato existente que invocará los estilos existentes. Su propósito principal es ayudar a sus usuarios a descubrir y utilizar la funcionalidad del Editor de Composición. Por ejemplo, los usuarios que usan muchas notas al pie de página probablemente simplemente teclearán ^[ y ] directamente en el teclado; pero el resto de nosotros estaremos encantados de tener un botón :asterisk: para recordarnos qué hacer.

Una ventaja de este enfoque es que si decide eliminar este componente de tema, no alterará el estilo de ninguna publicación existente. Este componente no es responsable de aplicar ningún estilo; solo proporciona atajos a la funcionalidad que ya existe en el Editor de Composición, y/o proporcionada por otros complementos o componentes de tema.

Configuración Predeterminada

La configuración predeterminada proporciona definiciones para la mayor parte (¿todo?) del formato adicional que está disponible en una instalación predeterminada de Discourse (con todos los complementos integrados habilitados y sin complementos adicionales instalados):

  • Estilos de texto:
    • subrayado, tachado
    • \u003csup\u003esuperíndice\u003c/sup\u003e y \u003csub\u003esubíndice\u003c/sub\u003e
    • \u003cbig\u003eTexto grande\u003c/big\u003e, \u003csmall\u003eTexto pequeño\u003c/small\u003e
    • \u003ckbd\u003eestilo de tecla\u003c/kbd\u003e
  • Formato
    • \u003cbig\u003e\u003cb\u003eEncabezado 1\u003c/b\u003e\u003c/big\u003e, \u003cb\u003eEncabezado 2\u003c/b\u003e, \u003csmall\u003e\u003cb\u003eEncabezado 3\u003c/b\u003e\u003c/small\u003e
    • Nota al pie[1]
    • \u003cruby\u003eTexto rubí\u003crp\u003e(\u003c/rp\u003e\u003crt\u003e ルビー テキスト\u003c/rt\u003e\u003crp\u003e)\u003c/rp\u003e\u003c/ruby\u003e
    • Imagen a través de URL externa (\u003cimg\u003e)
    • Lista de verificación
    • \u003cmark\u003eTexto resaltado\u003c/mark\u003e, \u003cins\u003eTexto insertado\u003c/ins\u003e, \u003cdel\u003eTexto eliminado\u003c/del\u003e
  • Símbolos
    • Copyright ©, Registrado ®, Marca registrada™
    • Euro €, Yen ¥
    • el kaomoji “encogerse de hombros” (porque, ¿por qué no? ¯\_(ツ)_/¯ )
  • y, un botón de alternancia para mostrar/ocultar la mayoría de los botones anteriores

Como se mencionó anteriormente, estos son meramente los valores predeterminados. Todos estos botones pueden reorganizarse o eliminarse, y se pueden agregar nuevos.


  1. …como esta nota al pie, por ejemplo. ↩︎

21 Me gusta

¡Esto es genial, gracias!

¿Hay alguna forma de añadir la etiqueta ‘spoiler’ directamente en la barra de herramientas superior? Es algo que usamos mucho.

Edición: Ya lo he resuelto :smiley:

3 Me gusta

¿Cómo funcionan los atajos?

Me gustaría crear un atajo de teclado para mi botón de “spoiler”, pero ¿no están la mayoría de los atajos ya ocupados para otras cosas?

El ejemplo dice shift-4 pero para mí eso es un signo de $…

2 Me gusta

Sí, un componente muy bueno. Estaba buscando el botón para mostrar los botones adicionales en la barra del compositor.

Creo que una función interesante sería agregar un botón a la barra del compositor. Tal vez 2 opciones: Mostrar/Ocultar y/o los menús de la barra del compositor. De esa manera, puedes agrupar funciones en una barra seleccionable.

Es decir:

  • Barra de estilo: que tendría cosas como negrita, cursiva, tachado, etc.
  • Barra de diseño: Tabla, justificar a la derecha, centrar, etc.
  • con la opción de personalizar la barra principal con las funciones más usadas.

(Ten en cuenta que este componente simplemente expone los parámetros/opciones que ya están en el código JS de Discourse…)

Para los atajos, especificas la tecla de atajo, junto con cualquier modificador… y luego Discourse siempre antepone ctrl+ (¿o cmd+ en hardware de Apple?). Por ejemplo, la cadena literal “shift+4” (como parámetro del botón) se traduce en ctrl+shift+4 (como las teclas de atajo).

:grimacing: No he intentado encontrar una manera de eliminar atajos — de nuevo, este componente es aditivo sobre la base de botones ya integrados en Composer. (¡Ojalá pudiera hacer que ctrl+e no fuera un atajo para texto preformateado, y que en su lugar fuera “saltar al final de la línea”!)

3 Me gusta

j0der qué increíble

2 Me gusta

Tengo un problema con esto, lo estoy usando y me encanta, pero he añadido un botón de “spoiler” y crea etiquetas de spoiler usando DIV en lugar de SPAN, por lo que siempre van en una nueva línea cuando se usa el editor WYSIWYG.

¿Hay alguna forma de cambiar esto, por favor?

¿Todavía es compatible?

Todavía tengo el problema de que los spoilers están en un DIV y no en un SPAN.

Supongo que esto ya no es compatible.

¿Alguien puede sugerir cómo puedo arreglar esto? El botón de “spoiler” no funciona correctamente (ver mi publicación anterior).

Investigaré esto, pero necesito que muestres específicamente cómo agregaste este botón de “spoiler”.

¡Gracias!

Aquí está mi configuración:

Screenshot 2025-11-30 at 19.58.22

Hay más debajo. Pero el spoiler se añade con:

spoiler,shift+x

En modo Markdown funciona perfectamente.
En modo WYSIWYG, cuando seleccionas algo y haces clic en el botón de spoiler, en lugar de estar en un SPAN, se inserta en un DIV, por lo que es un elemento de bloque por sí mismo en una nueva línea.

¡Gracias!

Literalmente hace una hora, me di cuenta de que ComposerButtonBonanza (CBB) está roto en WYSIWYG-Composer. (O, quizás, es al revés). No usamos WYSIWYG en el sitio que mantengo, ¡así que nunca me di cuenta! Así que… ugh.

(No soy fan de WYSIWYG. MediaWiki (por ejemplo, Wikipedia) puso mucho esfuerzo en un editor WYSIWYG hace más de una década, pensando que animaría a más personas a convertirse en editores. No supuso ninguna diferencia, y de todos modos no pudieron deshacerse del editor original porque hay tantas cosas que realmente no se pueden lograr con la versión WYSIWYG, y termina siendo generalmente un poco torpe en comparación con el editor original de código wiki + vista previa).

Mmm… independientemente de CBB… si inserto un spoiler en el WYSIWYG-Composer, y luego hago clic fuera del cuadro del spoiler para editar en otro lugar, se desenfoca permanentemente y no parece que pueda editar el texto del spoiler de nuevo… a menos que cambie al modo Markdown. ¿Me estoy perdiendo algo, o es solo un error en el modo WYSIWYG?

…¡Oh, olvídalo! Si hago triple clic (por frustración y/o aburrimiento), ¡entonces puedo editar el texto del spoiler de nuevo! (No soy fan del modo WYSIWYG; ¿ya lo mencioné?)

1 me gusta

Si puedes arreglar los spoilers para que no se conviertan en elementos de bloque, estaré muy agradecido :folded_hands:

Añadí una advertencia en la primera publicación de que no es compatible con el editor de texto enriquecido.

No lo he probado, pero me parece que esto no tiene nada que ver con este componente en particular. Empezaría un nuevo informe de error de soporte con pasos para reproducirlo.

No puedo reproducirlo, ¿qué navegador estás usando?

Este problema es específico del componente, la acción original “Blur spoiler” del núcleo utiliza una implementación diferente que no es solo añadir el bbcode [spoiler].

2 Me gusta

Ah, excelente y gracias por investigarlo. :+1:

Estoy usando Firefox 140.5.0esr.

1 me gusta

Gracias por el informe, debería estar solucionado ahora. (Y disculpa por el tema no relacionado)

Voy a ver si puedo escribir un componente adicional para anular lo que hace en el modo Texto Enriquecido, de modo que utilice la implementación del núcleo.

2 Me gusta

Este componente de tema actualmente muestra el siguiente error: