Formatting Toolbar : options de mise en forme

discourse

#1

Formatting toolbar


Pour notre forum on avait besoin d’outils de mise en forme assez complètes, choses qui ne sont pas présentent par défaut sur Discourse. Et après avoir créé un plugin perso pour notre communauté, je me suis rendu compte qu’il y avait une demande pour ce genre de fonctions, j’ai donc créé un plugin qui conviendra à la majorité d’entre vous avec les fonctions les plus utilisées :

  • souligner un texte
  • ajouter une couleur
  • élément flottant
  • bouton d’ajout d’une image
  • centrer
  • aligner à droite
  • justifier votre texte

Le plugin est disponible en français et en anglais.

Voici un exemple des fonctions du plugin :

Plugin Formatting Toolbar : options de mise en forme
Ce plugin permet à vos utilisateurs d’ajouter quelques fonctions basiques de mise en forme comme ajouter une couleur à votre texte, le souligner, centrer, aligner à droite, justifier.
Et avec la fonction float, vous pouvez ajouter du contenu (une image, un tableau) à côté du paragraphe, permettant des mises en forme plus jolies.
Et c’est simple à utiliser !

Lien du plugin


Astuces


  • Comment installer un plugin sur Discourse

  • Le BBCode [floatr][/floatr] qui permet d’ajouter un élément flottant à droite de votre texte a été créé dans le plugin mais le bouton n’a pas été ajouté à la toolbar, cela ne semblait pas nécessaire car il ne sera pas très utiliser et il est simple de modifier la balise floatl. Vous pouvez facilement modifier la marge entre votre élément flottant et le texte en ajoutant une feuille CSS dans la page Personnaliser de la partie Administration de Discourse, ajoutez les codes suivant, en modifiant la valeur en pixels du margin :

.floatl {
   float:left;
   margin-right:15px;
}
.floatr {
   float:right;
   margin-left:15px;
}

Remerciements


  • ZogStriP : pour le plugin vbulletin BBCode qui a servi de source,
  • eviltrout : pour les updates récentes du vbulletin BBcode,
  • cpradio : pour son aide sur la toolbar.

Notre service d'installation de Discourse
Installer un plugin sur Discourse
#2

Ajouter son propre bouton au plugin


Voici un petit guide pour ajouter son propre bouton sur la toolbar de votre forum.

Il vous faudra tout d’abord un compte GitHub.com (un compte gratuit suffira), une fois votre compte validé, allez sur la page du plugin Formatting Toolbar : https://github.com/iunctis/discourse-formatting-toolbar et cliquez sur le bouton Fork en haut à droite :

Ceci vous permettra de copier le plugin sur votre compte. Allez sur votre compte, puis dans la page Repositories et ouvrez le plugin discourse-formatting-toolbar.

Le plugin est sur votre compte et vous pouvez à présent le modifier à votre guise, ça n’affectera pas le plugin utilisé sur mon compte.

Pour ajouter un bouton il y a au minimum deux fichiers à modifier :

  • /assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6
  • /config/locales/client.fr.yml

Si vous êtes pointilleux, vous pouvez ajouter

  • /config/locales/client.en.yml

Et enfin si votre bouton nécessite l’ajout d’un BBCode :

  • /assets/javascripts/lib/discourse-markdown/formatting_bbcode.js.es6

Pour modifier un fichier, allez vers le fichier en question, ouvrez-le et cliquez sur l’icône en forme de crayon à droite :



Modifier le fichier formattingtlb-ui.js.es6

  • Le fichier /assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6 gère l’intégration du bouton sur la toolbar. Vous noterez un pattern dans ce fichier, un bouton représente un bloc de 8 lignes :

      api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "justify_ui_button",
            group: "extras",
            icon: "align-justify",
            perform: e => e.applySurround('[justify]', '[/justify]', 'justify_ui_default_text')
          });
      });
    

Copiez ce bloc, passez une ligne après }); et modifiez le code à partir de la troisième ligne :

  • id: représente le nom de code que vous donnerez au bouton. Cet élément va être utile plus bas et dans le fichier de langue.
  • group: est l’endroit où sera situé le bouton. Il existe trois groupes : fontStyles placera le bouton après les gras, italique (et souligner) / insertions pour le placer après le bouton d’upload d’images et de fichiers / extras pour placer le bouton après le bouton d’emoji.
  • icon: est l’icône FontAwesome qui donnera au bouton son visuel. Pour avoir les codes rendez-vous sur la page de la police FontAwesome. Exemple pour avoir un bouton avec l’image de l’ancre, utilisez le code anchor
  • perform: dans la parenthèse, trois éléments sont à modifier, les deux premiers concernent le code qui sera généré en appuyant sur le bouton, le troisième fait appel au texte qui apparaît en passant la souris sur le bouton. Le premier mot doit être identique au premier mot de la partie id vue plus haut.

Exemple, je vais créer un bouton utilisant le bbcode [url][/url]. Le code pour la langue et l’id du bouton sera lien et je veux que le bouton ait cette icône : http://fontawesome.io/icon/external-link/
    api.onToolbarCreate(toolbar => {
        toolbar.addButton({
          id: "justify_ui_button",
          group: "extras",
          icon: "align-justify",
          perform: e => e.applySurround('[justify]', '[/justify]', 'justify_ui_default_text')
        });
    });

    api.onToolbarCreate(toolbar => {
        toolbar.addButton({
          id: "lien_ui_button",
          group: "extras",
          icon: "external-link ",
          perform: e => e.applySurround('[url]', '[/url]', 'lien_ui_default_text')
        });
    });

Validez vos changements en cliquant sur le bouton vers Commit changes.



Modifier le fichier client.fr.yml

Même principe que pour l’autre fichier, vous allez vite voir un pattern après les lignes ajouter deux nouvelles lignes. Pour reprendre mon exemple, je veux qu’en passant la souris sur le bouton il y ait écrit “Ajouter un lien” et qu’en cliquant dessus, il y ait http:// entre les boutons [url] et [/url] :
justify_ui_button_title: "Justifier votre texte"
justify_ui_default_text: "Texte"
lien_ui_button_title: "Ajouter un lien"
lien_ui_default_text: "http://"

Sauvegardez et votre bouton sera ajouté et le texte y sera associé !



Enfin n’oubliez pas qu’au moment d’installer ou mettre à jour le plugin vous devrez utiliser le discourse-formatting-toolbar de votre github (https://github.com/votrecompte/discourse-formatting-toolbar.git)


Je n’évoque pas dans ce mini-guide la création d’un nouveau BBCode en plus d’un bouton, il faut ajouter du code dans le fichier /assets/javascripts/lib/discourse-markdown/formatting_bbcode.js.es6 mais cela s’avère plus complexe.


#3

Version 2.2 disponible

Aucune nouvelle fonction n’a été ajouté, c’est une MAJ d’ordre technique pour préparer le plugin à la mise à jour du moteur markdown de Discourse.

Discourse travaille depuis quelques semaines sur la refonte de leur moteur (ce qui gère la mise en forme des messages, comme la mise en gras, l’ajout d’images, etc). Ce nouveau moteur intègre des fonctions pratiques la création de tableau.

Le moteur va être installé par défaut sur tous les forums Discourse prochainement, mais si vous êtes pressés, vous pouvez le tester en activant l’option enable experimental markdown it dans vos paramètres

Voici la liste des modifications :


Suivre @iunctisFR sur Twitter - Programme Partenaire amazon.fr : Amazon Prime - Amazon Prime Video - Amazon Audible