Formatting Toolbar : options de mise en forme

Archives
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 :

github.jpg1000×50 23 KB

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 :

github2.jpg1000×290 120 KB


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.

1 « J'aime »