Barre d'outils de mise en forme

Personnalisation Greffon
148

Je ne pense pas que je serais capable de faire quelque chose comme ça. Lorsque j’ai créé le plugin, nous n’étions pas encore sur FontAwesome 5 ; je n’ai pas trouvé d’icône convenable pour l’indentation vers la droite. Si vous avez un

Mais si vous souhaitez modifier le bouton par défaut, vous avez deux solutions :

Masquez le bouton « flottant à gauche » avec ce CSS :

/* BOUTON FLOTTANT À GAUCHE */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

Et importez un composant de thème qui ajoutera un bouton « flottant à droite ».

Vous pouvez télécharger discourse-floatr.zip (1,2 Ko).

C’est un composant de thème que je viens de créer sur Discourse Theme pour ajouter un bouton « flottant à droite » avec la même icône que l’ancien bouton « flottant à gauche ».

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

1 « J'aime »
149

Steven ! Tu es un génie ! Merci beaucoup pour le travail supplémentaire sur ce projet :folded_hands:

J’ai opté pour l’option 2 car je ne sais pas du tout comment forker et modifier un plugin !

Tout a fonctionné parfaitement et maintenant ce bouton fait exactement ce qu’on voulait !

1 « J'aime »
150

Une dernière question : existe-t-il un moyen simple de déplacer certains boutons de la barre principale et de les masquer dans le menu de l’icône d’engrenage ?

Par exemple :

image
image956×417 105 KB

J’adore tous ces outils de ce plugin, mais je pense que la plupart de nos utilisateurs n’exploiteront probablement pas les options de mise en forme avancées. Je souhaiterais donc les simplifier pour eux. Je n’ai aucun problème avec un clic supplémentaire lorsque j’écris des publications, si cela permet d’offrir une expérience plus épurée et plus simple à nos utilisateurs.

151

Pas vraiment simple. Cela nécessiterait quelques modifications, comme pour le bouton floatr.

Soit en forkant et en modifiant le plugin, soit en les masquant et en les recréant dans l’option de menu contextuel de la barre d’outils.

Vous pouvez utiliser mon composant de thème comme exemple pour voir comment ajouter des options dans ce menu. Ou bien, je pourrais modifier le composant floatr que j’ai créé pour ajouter ce bouton aux options du menu contextuel, et vous pourrez facilement terminer le travail ensuite.

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

152

Tout d’abord, MERCI encore pour ce réglage sur le bouton floatr. Je l’ai déjà utilisé une demi-douzaine de fois et j’adore ne plus avoir à basculer de floatl à floatr ! Merci !!!

À un moment donné, j’aimerais en savoir plus et apprendre à modifier et créer des plugins. J’adorerais rendre la pareille et contribuer aux excellentes avancées de personnes comme vous dans cette communauté.

Ce serait formidable si vous pouviez ajouter ces boutons supplémentaires au menu contextuel de l’icône engrenage, afin de réduire le nombre d’options visibles pour les utilisateurs moyens. Je suis compétent en CSS et dans l’inspection des éléments du navigateur pour identifier les classes/identifiants que je souhaite modifier. Serait-il possible de faire de même avec votre « composant » afin que je puisse examiner la syntaxe du code et décider facilement quels boutons inclure dans le menu et/ou retirer pour les remettre dans la barre ? Ou est-ce un peu plus complexe que cela ?

153

C’est plus complexe car cela n’utilise pas le même JavaScript.

J’ai créé un exemple rapide : si vous voulez un bouton « barré » dans l’éditeur, vous devez utiliser ce JavaScript :

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

Mais pour les options du menu de la barre d’outils, c’est totalement différent :

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

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

Je n’ai pas ajouté les traductions nécessaires pour les options de la barre d’outils, etc. Mais vous avez compris l’idée.

Je n’ai pas les connaissances pour ajouter un choix entre la barre d’outils et les options du menu, ni pour adapter le JavaScript. Ma tentative d’ajouter une option pour activer/désactiver certains boutons a fonctionné pendant un temps, mais elle a récemment échoué et je ne sais pas vraiment comment la corriger. J’ai donc dû faire un choix pour la majorité des utilisateurs.

Quoi qu’il en soit, si vous souhaitez conserver le BBCode mais déplacer les boutons dans les options du menu, je pense que la meilleure solution est de garder le plugin, de masquer les boutons via CSS et d’utiliser un composant de thème pour ajouter des boutons dans les options du menu. C’est tout à fait réalisable, puisque nous avons essentiellement fait quelque chose de similaire pour le bouton flottant. Cela prend un peu de temps, mais si vous êtes perdu sur ce sujet, je peux vous aider.

Pour les composants de thème, il est préférable d’utiliser Discourse Theme. Vous pouvez y ajouter des paramètres à votre composant, des traductions et du code, puis le prévisualiser. C’est un outil vraiment pratique pour les créateurs.

2 « J'aime »
154

Vous êtes incroyable, @Steven ! Merci pour cette réponse détaillée. Je vais voir comment la communauté gère l’ensemble des options, et si je constate que cela crée de la confusion, j’opterai pour votre deuxième approche ici avec les composants de thème. Cette approche me semble très claire.

Merci encore pour votre aide et pour soutenir ce fantastique plugin. Au fait… je ne saurais assez vous remercier de m’avoir aidé à déplacer le bouton flottant par défaut vers la « droite ». C’est génial !

155

Question rapide : Que devons-nous modifier dans ce code api.onToolbarCreate de notre thème pour changer l’action d’un bouton dans l’éditeur ?

En gros, nous voulons ajouter un nouveau bouton dans l’éditeur qui enveloppe un bloc de code sur plusieurs lignes avec ce format Markdown :

```text

```

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

Ainsi, le résultat s’applique autour d’un bloc de code sur plusieurs lignes, au lieu d’ajouter notre nouvelle action pour chaque ligne ?

Avant l’action du bouton :

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

Après l’action du bouton :

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

Je suppose qu’il existe une méthode différente de e.applySurround qui s’applique à un bloc de texte sur plusieurs lignes ? Mais une recherche sur le site et sur Google n’a rien donné, alors après 30 minutes de recherche, j’ai décidé de poser la question.

J’ai également recherché sur https://docs.discourse.org/ avec divers mots-clés, sans succès.

Merci,

156

J’ai trouvé la méthode / le paramètre multiline: false avec un peu plus de recherches sur 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 } )
    });
});

Donc, je suis prêt. Merci.

157

Corrigez-moi si je me trompe, mais le bbcode de discours officiel est déjà inclus dans la dernière version de Discourse. Si j’installe ce plugin, y aura-t-il un conflit ? La raison principale pour laquelle je veux cette barre d’outils de mise en forme est d’avoir la possibilité de changer la couleur du texte via un bouton.

158

Il n’y a aucun conflit.

159

Le plugin Discourse BBCode semble toujours être un plugin externe, non inclus dans le cœur du système.

Vous avez deux options :

  • Ce plugin qui ajoute les balises BBCode dans le moteur ainsi que des boutons dans la barre d’outils.
  • Le plugin BBCode officiel + Composer extras (un composant de thème optionnel qui ajoute des boutons dans la barre d’outils).

La deuxième option est préférable si vous souhaitez utiliser le plugin officiel ; le composant de thème peut être facilement désactivé s’il nécessite une mise à jour.

La barre d’outils de mise en forme ne devrait pas être endommagée ni créer de conflit avec le cœur de Discourse.

1 « J'aime »
160

J’utilisais auparavant le composant de thème md composer avec le plugin bbcode officiel. Cependant, il n’y a pas de bouton pour changer la couleur du texte, contrairement à ce plugin. Idéalement, un sélecteur de couleurs serait bien, mais je ne pense pas que ce soit possible.

161

Ah, je vois : le composant n’utilise que des éléments disponibles dans le noyau, et le bbcode de couleur nécessite un plugin, comme vous le savez. Ce n’est pas si difficile de modifier un bouton dans le composant (ou de faire un fork sur GitHub), mais dans votre cas, vous avez raison : ce plugin est le meilleur choix.

Vous pouvez installer ce plugin, mais je vous recommande de désinstaller le plugin bbcode officiel en même temps pour éviter tout conflit dans le moteur Markdown.

En ce qui concerne le sélecteur de couleurs, je ne suis pas vraiment un bon développeur ; j’ai simplement utilisé certains outils disponibles pour les partager avec la communauté. Je serais ravi de recevoir une pull request pour améliorer ce plugin.

1 « J'aime »
162

Je vais probablement apprendre à ajouter des boutons à l’éditeur de message, car je suis en train de créer mon propre plugin. Cependant, je ne suis pas sûr d’être la bonne personne pour soumettre une pull request afin d’ajouter un sélecteur de couleur, étant donné que je découvre Discourse depuis peu.

Et oui, j’ai désinstallé le plugin bbcode officiel. Il existe aussi Awesome BBCode, qui propose une fonction d’autocomplétion. Toutefois, grâce au bouton de couleur, je pense que cette solution est plus adaptée aux utilisateurs moyens qui découvrent Discourse et ne sont pas familiers avec bbcode.

163

image

J’ai remarqué que ce plugin inclut un autre bouton « insérer une image ». Est-ce vraiment nécessaire, puisque le bouton d’origine permet déjà d’ajouter des pièces jointes ou un lien URL ? J’apprécie par ailleurs les boutons de mise en forme. Je me demandais juste, car il paraît étrange d’avoir deux icônes d’image dans l’éditeur. Si on ne peut pas le supprimer, je devrai revenir à l’utilisation de l’éditeur Markdown + le bbcode officiel.

1 « J'aime »
164

Vous pouvez facilement utiliser CSS pour masquer n’importe quel bouton ou élément que vous souhaitez cacher dans la barre d’outils de l’éditeur.

Ou, une autre alternative :

Vous pouvez facilement modifier le plugin pour supprimer n’importe quel bouton que vous ne souhaitez pas afficher dans la barre d’outils de l’éditeur.

165

Cela a été ajouté principalement pour être utilisé avec le bouton flottant ou l’alignement des forums, qui dépendent beaucoup de liens externes. Si vous utilisez principalement des images téléchargées en interne, vous pouvez le masquer.

166

Si je commente les lignes, cela suffira-t-il pour supprimer ce bouton ?

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

167

Il est préférable d’ajouter un peu de CSS dans votre thème

/* BOUTON D'IMAGE */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
1 « J'aime »