Extras de MD Composer

He hecho lo que sugeriste y he suprimido los que no necesitaba de esta manera:

// Oculta botones innecesarios del TC de Extras del Compositor MD 
.d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

Sin embargo, sería muy bueno poder elegir qué botones incluir en la configuración del TC para esto. Me pregunto si esto se podría hacer simplemente haciendo que si no hay texto en la configuración de un botón, entonces no se crearía.

Intenté hacerlo, pero estaba más allá de mis modestas habilidades; simplemente no pude hacer que cada parte dependiera de la configuración relevante.

1 me gusta

Hola Steven# Componente muy bueno pero he encontrado un pequeño error. El superíndice tiene un pequeño error. Ver abajo.

Cerrando con /sub en lugar de /sup

2 Me gusta

Solo un pensamiento, probablemente podrías tener un todo en uno que use interruptores de configuración en la versión avanzada.

es decir, un interruptor si se usa el plugin de bbcode y ambos podrían tener opciones para ocultar botones o agregar botones a la barra. Con lo mismo si los administradores quieren excluir opciones en el menú desplegable :gear:.

Todavía soy bastante novato aprendiendo CSS. Sin embargo, probablemente se podría hacer un componente complementario para darle un toque extra para organizar el menú desplegable con un menú desplegable en cascada.

es decir, menú desplegable principal de engranaje con selector de opción de color.

:gear: .
Insertar Encuesta
Insertar Tabla
COLOR de Texto. > Rojo
Verde
Azul
Naranja

Uno podría agrupar otras opciones de formato en el menú desplegable y/o la barra de herramientas para tener un menú para elegir una opción de formato.

1 me gusta

Gracias, he implementado una corrección en este problema.

2 Me gusta

De nada y muchas gracias por la rápida respuesta y solución. :vulcan_salute::smiling_face_with_sunglasses::handshake:

Recomendaría actualizar tu Op Post para incluir cómo usar la instalación de rama opcional. Encontré tus alternativas de rama “color” y “simple”.

En tu rama color, hice un pequeño cambio en el bbcode_color

en “Desktop\Head” - línea 65 y “Mobile\Head” - línea 96

de “[color=##233]” a “[color=name]” Ya que haré una guía para mi sitio WiP sobre cómo cambiar el nombre a nombre de color.

El valor hexadecimal no es el que tenías. Solo pon eso como referencia de lo que era.

Todavía soy nuevo en esto y necesitaré crear una cuenta en GitHub y aprender cómo hacer solicitudes de extracción en algún momento.

¡Muchas gracias por este componente sencillo y lleno de funciones! Muy apreciado.

Y una pequeña sugerencia, ¿sería posible utilizar la convención de Markdown de ~~esto~~ para tachado en lugar de la convención más verbosa de <s></s>?

1 me gusta

Interviniendo en esto :slight_smile:

Sería genial tener una opción nativa para mostrar los extras del compositor MD solo a grupos específicos. En nuestro caso, nos gustaría probar los botones adicionales solo para nuestro personal en este momento.

Por ahora, lo oculté agregando body:not(.staff) al código de Nathan:

// Oculta botones innecesarios del TC de extras del compositor MD de usuarios que no son personal
body:not(.staff) .d-editor-button-bar {
    .superscript_button,.subscript_button, .align_center_button,.align_right_button, .align_justify_button {
        display: none;
    }
}

El siguiente nivel sería una configuración de permisos para cada botón individual. :drooling_face:

2 Me gusta

@jrgong puedes hacer esto agregando este componente y algo de CSS

puedes ver las secciones de mi menú de navegación de grupos TC para un ejemplo de CSS - enlace en mi tarjeta de usuario.

5 Me gusta

¿Cómo es que esto aún no está en el núcleo? :smiley: Gracias por compartir, lo aprecio mucho.

3 Me gusta

¿Sigue siendo así que el Plugin tiene ventajas sobre este Componente de Tema?

Aún creo que el plugin es mejor, pero si las opciones que se presentan aquí te convienen, está bien.

2 Me gusta

Gracias por la rápida respuesta. ¿Puede explicar por qué?

Solo una opinión personal, creo que añadimos demasiados botones en el componente.

El plugin está más centrado en funciones básicas, el sistema bbcode también es más fácil ([center] en lugar de [wrap="center"]) pero el componente es claramente más fácil de instalar.

4 Me gusta

Por si no lo has visto:

image

3 Me gusta

Hice un PR :+1:

https://github.com/MonDiscourse/md-composer-extras/pull/12

2 Me gusta

¿Sería posible añadir una clase CSS md-composer-extras a todos los botones? Mi objetivo es ocultarlos todos a la vez para los usuarios que no sean del personal, y eso simplificaría mucho la selección CSS.

No estoy seguro de que esto sea posible, con el código de ejemplo del archivo de la API del plugin, no veo una forma de agregar una especie de clase raíz para todos estos iconos. Sin embargo, puedo estar equivocado.

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
    id: 'pop-text',
    group: 'extras',
    icon: 'bolt',
    action: 'makeItPop',
    title: 'pop_format.title'
  });
});

Se aplica una clase staff al elemento <body>.

Así, puedes apuntar a cualquier botón como:

body:not(.staff) .d-editor-button-bar {
    /* Oculta todo
     * (botones visibles, incluido el botón del menú emergente)
     */
    button,
    .toolbar-popup-menu-options {
        display: none;
    }
}
body:not(.staff) .d-editor-button-bar {
    /* Ocultar botones específicos */
    button {
        /* Botones en línea */
        &.align_justify_button,
        &.align_right_button
        /* ... */
        {
            display: none;
        }

        /* Menú emergente */
        &.toolbar-popup-menu-options {
            [data-name="Float left"],
            /* ... */ {
                display: none;
            }
        }
    }
}

¿Eso ayudaría?

Como nota aparte, podrías estar interesado en este componente:

¡Hola Arkshine! ¡Eso definitivamente ayuda! Sin embargo, en mi humilde opinión, sería un enfoque más eficiente agregar una clase CSS md-composer-extras a cada uno de los botones. De esa manera, el marcado CSS para ocultar todos los elementos es súper simple :slight_smile:

¡Gracias! De hecho, ya lo estamos usando :wink: