Extras du compositeur MD

[Steven]

Ce composant de thème ajoute quelques options de mise en forme dans l’éditeur : soulignement, alignement au centre, alignement à droite, justifier et barré. Vous pouvez personnaliser le texte de chaque bouton dans les paramètres, le rendant compatible avec toutes les langues. Existe en version rtl (remplacez l’alignement à droite par l’alignement à gauche).

Compatibilité

Ce composant de thème est une alternative à Discourse Formatting Toolbar, je ne recommande pas d’utiliser les deux.

Je recommande le plugin, mais si vous ne voulez pas (ou ne pouvez pas) installer un plugin, ce composant de thème pourrait ajouter suffisamment d’options dans l’éditeur pour vous.

Aussi, pour adapter le composant aux appareils mobiles, j’ai masqué certains boutons : liste à puces, liste et justifier. Ils semblaient les moins utiles sur cet appareil.

Pour les forums en langues rtl, voici la version rtl : GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

Faites-moi savoir s’il y a un problème !

	Aperçu	md-composer-extras - Aperçu
	Dépôt	md-composer-extras
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau sur les thèmes Discourse ?	Guide pour débutant sur l’utilisation des thèmes Discourse

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

Vraiment incroyable ce qu’on peut faire avec les composants de thème ! Bien joué.

[verilog15 (verilog)]

Bien joué
Penses-tu qu’il soit possible de convertir les balises HTML en une balise par défaut comme [Center], puis de les reconvertir côté backend (pour des raisons d’interface) ?

[Steven]

À l’époque, il n’était pas possible de créer facilement certains codes BB avec les composants de thème ; je ne sais pas si c’est le cas maintenant.

Pour l’instant, si vous souhaitez ajouter un code BB de centrage et un bouton dans l’éditeur, la meilleure solution consiste à utiliser le plugin : Formatting toolbar

[Johani (Joe)]

Une balise comme [center] nécessitera toujours un plugin, mais vous avez raison @Steven

Au moment de la création de ce composant, vous deviez utiliser des balises HTML <div>. Cependant, vous pouvez maintenant utiliser [wrap="foo"][/wrap] dans les thèmes et les composants.

Vous pouvez en savoir plus à ce sujet ici :

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Voici un exemple simple :

[wrap="center"] 
Un texte centré 
[/wrap]

génère le balisage suivant une fois le message traité :

<div class="d-wrap" data-wrap="center">
  <p>Un texte centré</p>
</div>

Vous pouvez ensuite cibler cela avec un sélecteur d’attribut CSS comme ceci :

[data-wrap="center"] {
  text-align: center;
}

Ce qui produira un résultat similaire dans l’aperçu de l’éditeur et dans le message rendu :

Ou :

[wrap="right"] 
Un texte aligné à droite 
[/wrap]

Ce qui donnera le balisage suivant après traitement :

<div class="d-wrap" data-wrap="right">
  <p>Un texte aligné à droite</p>
</div>

Vous pouvez ensuite ajouter ce CSS :

[data-wrap="right"] {
  text-align: right;
}

Pour obtenir ce résultat :

Puisque le composant utilise actuellement l’attribut HTML align, ce changement devrait être 100 % rétrocompatible.

Essayez-le quand vous avez le temps, et n’hésitez pas à m’envoyer un MP si vous avez des questions à ce sujet.

[thwright]

Je viens de soumettre des pull requests pour les composants wrap.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

J’ai ajouté d’autres pull requests pour l’alignement à gauche avec une option CSS pour l’alignement à droite, déplacé le bouton barré pour qu’il se trouve avec les boutons gras, italique et souligné, et créé un bouton de colonnes basique. Ce dernier pourrait mieux figurer en tant que composant autonome ou être déplacé vers le menu contextuel.

J’ai retiré la pull request ; elle nécessite des modifications supplémentaires. Je souhaite également ajouter des boutons pour les exposants et les indices, mais une fois les événements de calendrier, Slick et les tuiles intégrés, il y a trop de boutons dans le compositeur vertical sur mobile. Cela ne devrait pas poser de problème en mode horizontal, mais si tous les boutons doivent être accessibles depuis l’un ou l’autre menu, ils devraient être déplacés dans le menu contextuel.

Qu’en penses-tu, @Steven, et comment souhaites-tu gérer cela ?

Je vais simplement diviser le fichier JS principal en deux et travailler sur du CSS responsive.

Idéalement, nous devrions également ajouter des paramètres pour désactiver ou masquer les boutons selon les besoins.

---

MODIFICATION : J’ai mis en œuvre les changements mentionnés (mais les éléments n’ont pas d’option pour être masqués en dehors du CSS) et je dois simplement tester les modifications avant de soumettre une PR.

[thwright]

Cette PR devrait être bonne maintenant, @Steven.

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

Cette PR implémente la réactivité, les flottants, les colonnes, les exposants et les indices. Consultez le README pour savoir comment fonctionnent les colonnes.

[ondrej]

Bonjour,
Je ne sais pas pourquoi je rencontre cela. Je l’ai téléchargé l’autre jour. Je suis sur la dernière version, du moins c’est ce que l’application m’indique.
Merci

[Steven]

J’ai récemment poussé une mise à niveau, mais elle devrait fonctionner correctement. Je viens de la tester sur un site web, tant sur ordinateur que sur mobile.

Pourriez-vous essayer de supprimer le composant et de le réinstaller ? Il semble cassé sur votre forum.

Ou utilisez-vous également le plugin de barre d’outils de mise en forme ? Cela pourrait créer des doubles icônes.

[ondrej]

D’accord, merci. Je vais regarder et faire ce que tu dis. Joyeux anniversaire aussi

[zuker (Matías)]

Est-il possible de masquer certaines icônes ?

[Steven]

Lesquels voulez-vous masquer ? Je vous aiderai à le faire.

[zuker (Matías)]

Strike, sub, sup Merci !

[Steven]

Le moyen le plus simple consiste à ajouter ces lignes CSS dans votre thème, dans Commun > CSS

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}