Barra de herramientas de formato

Personalización Plugin
148

No creo que pudiera hacer algo así. Cuando creé el complemento, aún no estábamos en FontAwesome5 y no encontré un icono adecuado para la sangría a la derecha. Si tienes un

Pero si quieres cambiar el botón predeterminado, tienes dos soluciones:

Oculta el botón de alineación a la izquierda con este CSS:

/* BOTÓN DE ALINEACIÓN A LA IZQUIERDA */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

Y luego importa un componente de tema que agregue un botón de alineación a la derecha.

Lo que puedes hacer es descargar discourse-floatr.zip|adjunto (1.2 KB).

Es un componente de tema que acabo de crear en Discourse Theme para agregar un botón de alineación a la derecha con el mismo icono que tenía anteriormente el botón de alineación a la izquierda.

https://theme-creator.discourse.org/theme/Steven/floatr

1 me gusta
149

¡Steven! ¡Eres un genio! ¡Muchas gracias por el trabajo extra en esto! :folded_hands:

Me decanté por la opción 2 porque no tengo ni idea de cómo bifurcar y modificar un plugin.

¡Todo funcionó perfectamente y ahora ese botón hace exactamente lo que queremos!

1 me gusta
150

Una pregunta más… ¿hay una forma sencilla de mover botones específicos de la barra principal y ocultarlos en el menú del icono de engranaje?

Ejemplo:

image
image956×417 105 KB

Me encantan todas estas herramientas de este plugin, pero creo que la mayoría de nuestros usuarios probablemente no utilizarán las opciones de formato avanzado, por lo que me gustaría simplificarlo para ellos. No me importa tener que hacer un clic adicional al escribir publicaciones, si eso resulta en una experiencia más limpia y sencilla para nuestros usuarios.

151

Fácil, no. Necesitaría alguna modificación, como el botón flotante.

O bien bifurcar y editar el plugin, o bien ocultarlos y volver a crearlos en la opción del menú emergente de la barra de herramientas.

Puedes usar mi componente de tema como ejemplo para saber cómo agregar algunas opciones en este menú. O puedo editar el componente flotante que creé para añadir este botón en las opciones del menú emergente, y luego tú puedes terminar el trabajo fácilmente.

https://github.com/iunctis/md-composer-extras

152

En primer lugar, ¡MUCHAS GRACIAS de nuevo por ese ajuste en el botón floatr! Ya lo he usado media docena de veces y me encanta no tener que cambiar de floatl a floatr. ¡Muchas gracias!!!

En algún momento me gustaría aprender más y saber cómo editar y crear complementos. Me encantaría devolver el favor y contribuir a los grandes avances de personas como tú en esta comunidad.

Sería genial si pudieras añadir esos botones adicionales al menú emergente del icono de engranaje, para que haya menos opciones visibles para los usuarios promedio. Soy competente en CSS y en inspeccionar los elementos del navegador para encontrar las clases o identificadores que quiero modificar. ¿Podría hacer lo mismo con tu “componente” para examinar la sintaxis del código y decidir fácilmente qué botones incluir en el menú y/o eliminar del menú y volver a colocarlos en la barra? ¿O es un poco más complejo que eso?

153

Es más complejo porque no utiliza el mismo JavaScript.

He creado un ejemplo rápido: si quieres un botón de tachado en el editor, debes usar este JavaScript:

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

Pero para las opciones del menú de la barra de herramientas, es totalmente diferente:

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

No he añadido las traducciones necesarias para las opciones de la barra de herramientas, etc., pero ya tienes la idea.

No tengo los conocimientos para añadir una opción de elección entre la barra de herramientas y las opciones del menú, ni para adaptar el JavaScript. Mi intento de añadir una opción para activar/desactivar algunos botones funcionó durante un tiempo, pero se rompió recientemente y no sé muy bien cómo solucionarlo. Así que tuve que tomar una decisión para la mayoría de los usuarios.

De todos modos, si quieres mantener el BBCode pero trasladar los botones a las opciones del menú, creo que la mejor manera es mantener el plugin, ocultar los botones mediante CSS y usar un componente de tema para añadir los botones en las opciones del menú. Es totalmente factible, ya que básicamente hicimos algo similar con el botón flotante. Requiere algo de tiempo, pero si te sientes perdido en este tema, puedo ayudarte.

Para los componentes de tema, lo mejor es utilizar Discourse Theme; puedes añadir configuraciones a tu componente, traducciones y código, y previsualizarlo. Es una herramienta realmente excelente para creadores.

2 Me gusta
154

¡Eres increíble, @Steven! Gracias por esta respuesta tan detallada. Creo que voy a ver cómo maneja la comunidad tener todas las opciones y, si escucho que resulta confuso, aplicaré tu segunda propuesta aquí con los componentes del tema. Esa estrategia me parece muy clara.

Gracias de nuevo por tu ayuda y por apoyar este plugin fantástico. Por cierto… no puedo agradecerte lo suficiente por ayudarme a cambiar el botón flotante predeterminado a la “derecha”. ¡Ha sido genial!

155

Pregunta rápida: ¿Qué debemos cambiar en este código api.onToolbarCreate de nuestro tema para que un botón del editor realice una acción diferente?

Básicamente, queremos añadir un nuevo botón en el editor que envuelva un bloque de código multilínea con este formato MD:

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

¿De modo que el resultado envuelva todo el bloque de código multilínea en lugar de aplicar nuestra nueva acción a cada línea?

Antes de la acción del botón:

Screen Shot 2020-04-08 at 7.02.47 PM
Screen Shot 2020-04-08 at 7.02.47 PM860×209 11.8 KB

Después de la acción del botón:

Screen Shot 2020-04-08 at 7.02.53 PM
Screen Shot 2020-04-08 at 7.02.53 PM2048×858 130 KB

Supongo que existe un método diferente a e.applySurround que se aplique a un bloque de texto multilínea. Sin embargo, al buscar en el sitio y en Google no encontré nada, así que después de 30 minutos de búsqueda, decidí publicar esta pregunta.

También busqué en https://docs.discourse.org/ con varias palabras clave y no tuve suerte.

Gracias,

156

Encontré el método / parámetro multiline: false con más búsquedas en Google…

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )

});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

Así que ya estoy listo. Gracias.

157

Corrígeme si me equivoco, pero el bbcode oficial de Discourse ya viene incluido en la última versión de Discourse. Si instalo este complemento, ¿habrá conflicto? La razón principal por la que quiero esta barra de herramientas de formato es tener la opción de cambiar el color del texto mediante un botón.

158

No hay ningún conflicto en absoluto.

159

El plugin de BBCode de Discourse sigue pareciendo un plugin externo, no incluido en el núcleo.

Tienes dos opciones:

La segunda opción es la mejor si prefieres usar el plugin oficial; el componente de tema se puede desactivar fácilmente si necesita actualizarse.

La barra de herramientas de formato no debería estar rota ni generar conflictos con el núcleo de Discourse.

1 me gusta
160

Antes utilizaba el componente de tema del editor md con el plugin oficial de BBCode. Sin embargo, no hay ningún botón para cambiar el color del texto, algo que este plugin sí ofrece. Sería ideal tener un selector de color, pero no creo que sea posible.

161

Ah, ya veo: el componente solo utiliza elementos disponibles en el núcleo, y el bbcode de color requiere un plugin, como sabes. No es tan difícil editar un botón en el componente (o hacer un fork en GitHub), pero en tu caso tienes razón: este plugin es la mejor opción.

Puedes instalar este plugin, pero te recomiendo desinstalar al mismo tiempo el plugin oficial de bbcode para evitar cualquier conflicto en el motor de Markdown.

En cuanto al selector de color, honestamente no soy un buen programador; solo utilicé algunas herramientas disponibles para compartir con la comunidad. Acepto con gusto una solicitud de extracción (pull request) para mejorar este plugin.

1 me gusta
162

Probablemente aprenderé a jugar añadiendo botones al editor, ya que voy a crear mi propio plugin. Sin embargo, no estoy seguro de ser la persona adecuada para enviar un pull request que añada un selector de color, dado que recién estoy aprendiendo Discourse.

Y sí, desinstalé el plugin oficial de bbcode. También existe el plugin awesome bbcode, que tiene autocompletado. Sin embargo, debido al botón de color, creo que esta opción es mejor para los usuarios promedio que son nuevos en Discourse y no están familiarizados con bbcode.

163

image

He notado que este plugin incluye otro botón de “insertar imagen”. ¿Es realmente necesario, ya que el original permite adjuntos o un enlace URL? Me gustan los botones de formato, por lo demás. Solo me pregunto, porque se ve raro tener dos iconos de imagen en el editor. Si no se puede eliminar, tendré que volver a usar el editor md + bbcode oficial.

1 me gusta
164

Puedes usar CSS fácilmente para ocultar cualquier botón o elemento que desees ocultar en la barra de herramientas del editor.

O, otra alternativa:

Puedes modificar fácilmente el plugin para eliminar cualquier botón que no desees mostrar en la barra de herramientas del editor.

165

Se agregó principalmente para usarse con el botón flotante o la alineación de los foros, que dependen en gran medida de enlaces externos. Si principalmente utilizas imágenes cargadas internamente, puedes ocultarlo.

166

Si comento las líneas, ¿será suficiente para eliminar ese botón?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

167

Es mejor agregar algo de CSS en tu tema

/* BOTÓN DE IMAGEN */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
1 me gusta