[done] Barre de formatage pour le BBCode

Bonjour,

Je propose l'ajout, lors de la rédaction d'un message sur le forum, d'une barre d'outil (gras, italique, souligné, couleur, lien ...). Cela faciliterait l'écriture des messages. Par exemple on aurait juste à sélectionné un partie du texte puis à appuyer sur la rubrique "mettre en gras" et ça entrerait le code [b][./b] tout seul au tour de la partie désirée.

Edité le 26/12/17 1:06.

Intéressant. Mais je crois que ARRG fournira un gros boulot dessus puisque ceci se trouve plus dans les forums. Les codes restent un peu compliqué à lancer, mais je crois que c'est faisable. Genre version phpbb reste faisable.

Ceci reste une très bonne idée, cependant ARRG vous a bien donné les codes via Anapédia, surement pour ne pas se casser la tête. :)

Je crois que les codes sont en javascript.

Edité le 24/11/13 15:03.

J'ai vu ça mais je trouve que ça serait beaucoup plus rapide avec cette barre d'outil.
Mais bon après je ne m'y connais pas en informatique (pas la peine de me parler de phpbb ...) donc si ce n'est pas réalisable, tant pis. :)

<table cellspacing="0" style="width:10px"><tbody><tr><td class="bbw-l"><a class="sized-img bbb-color bbb-l" href="javascript:void(0);" accesskey="p" id="addbbcode1_color" title="Couleur du texte : [color=red]texte[/color] Astuce: #FF0000 fonctionne aussi" onclick="openColorPicker(1,event);"></a></td><td><a href="#" id="addbbcode1_size" onclick="InfoBox3.open(this, function(size){bbfontstyle(1, '[size='+size+']','[/size]');return false;}, {"<span style="font-size:10px">10px</span>":"10","<span style="font-size:12px">12px</span>":"12","<span style="font-size:16px">16px</span>":"16","<span style="font-size:18px">18px</span>":"18","<span style="font-size:24px">24px</span>":"24","<span style="font-size:32px">32px</span>":"32","<span style="font-size:48px">48px</span>":"48"}, event);return false;"><span style="font-size:12px !important">12px</span></a></td><td class="bbw-r"><a href="#" accesskey="5" class="sized" id="addbbcode1_font" onclick="InfoBox3.open(this, function(font){bbfontstyle(1, '[font='+font+']','[/font]');return false;}, {"<span style="font-size:12px;line-height:18px">Aucune</span>":"default","<span style="font-family:Arial, sans-serif;font-size:12px;line-height:18px">Arial</span>":"Arial, sans-serif","<span style="font-family:Arial Black, sans-serif;font-size:12px;line-height:18px">Arial Black</span>":"Arial Black, sans-serif","<span style="font-family:Comic Sans MS, cursive, sans-serif;font-size:12px;line-height:18px">Comic Sans MS</span>":"Comic Sans MS, cursive, sans-serif","<span style="font-family:Courier New, monospace;font-size:12px;line-height:18px">Courier New</span>":"Courier New, monospace","<span style="font-family:cursive, fantasy;font-size:12px;line-height:18px">Cursive</span>":"cursive, fantasy","<span style="font-family:fantasy;font-size:12px;line-height:18px">Fantasy</span>":"fantasy","<span style="font-family:Georgia, serif;font-size:12px;line-height:18px">Georgia</span>":"Georgia, serif","<span style="font-family:Impact, fantasy, sans-serif;font-size:12px;line-height:18px">Impact</span>":"Impact, fantasy, sans-serif","<span style="font-family:monospace, mono;font-size:12px;line-height:18px">Monospace</span>":"monospace, Mono","<span style="font-family:sans-serif;font-size:12px;line-height:18px">Sans-Serif</span>":"sans-serif","<span style="font-family:serif;font-size:12px;line-height:18px">Serif</span>":"serif","<span style="font-family:Tahoma, sans-serif;font-size:12px;line-height:18px">Tahoma</span>":"Tahoma, sans-serif","<span style="font-family:Times New Roman, serif;font-size:12px;line-height:18px">Times New Roman</span>":"Times New Roman, serif","<span style="font-family:Trebuchet MS, sans-serif;font-size:12px;line-height:18px">Trebuchet MS</span>":"Trebuchet MS, sans-serif","<span style="font-family:Verdana, sans-serif;font-size:12px;line-height:18px">Verdana</span>":"Verdana, sans-serif"}, event);return false;" title="Police du texte : [font=Exemple]votre texte[/font] (accesskey: 5)"><span style="font-weight:bold !important;font-style:italic !important;font-family:Georgia, serif !important">aA</span></a></td></tr></tbody></table>






<table cellspacing="0" style="width:10px"><tbody><tr><td class="bbw-l"><a class="sized bbb-l" href="#" accesskey="b" id="addbbcode1_0" title="Texte gras : texte (accesskey: b)"><span style="font-weight:bold !important">G</span></a></td><td><a class="sized" href="#" accesskey="i" id="addbbcode1_2" title="Texte italique : texte (accesskey: i)"><span style="font-style:italic !important">I</span></a></td><td><a class="sized" href="#" accesskey="u" id="addbbcode1_4" title="Texte souligné : [u]texte[/u] (accesskey: u)"><span style="text-decoration:underline !important">S</span></a></td><td class="bbw-r"><a class="sized" href="#" accesskey="m" id="addbbcode1_30" title="Texte Barré : [del]texte[/del] (accesskey: m)"><span style="text-decoration:line-through !important"> B </span></a></td></tr></tbody></table>

Faire des test avec ça pour voir si sa peut donner un truc potable. Je n'ai pas tout je crois ...

Gras a
Italique a
Souligné [u]a[/u]
Barré [strike]a[/strike] [del]a[/del]
Aligné à gauche [left]a[/left]
Centrer [center]a[/center]
Aligné à droite [right]a[/right]
Justifier [justify]aaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa[/justify]
Citer

Code [code]abc[/code]
Spoiler [spoiler]a[/spoiler]
Cacher [hide]a[/hide]
Image
Lien a
Taille a
Couleur a
Police [font=Georgia]a[/font]

Edité le 24/11/13 15:33.

Marche :
Gras
Italique
Citer
Image
Lien
Taille
Couleur

Marche pas :
Souligné
Barré
Aligné
Centrer
Justifier
Code
Spoiler
Caché
Police

Il existe effectivement des codes tout prêt pour insérer un éditeur WYSIWYG de bbcode dans une page web (http://www.sceditor.com/).

Mais est-ce si utile ?

Bah personnellement je trouve ça utile pour mettre des choses en évidence au milieu d'un gros pavé et rendre ça plus attirant.

Sa pourrais être pas mal, excepter le coter cacher qui n'est absolument pas utile. Sauf pour un pirate.

J'ai pris les éléments d'une barre d'outil "type", et puis je ne sais pas à quoi ça sert ...

C'est vrai que si ça se faisait ça serait super mais je pense que ça demanderait à ARRG un peu bcp de boulot ....

Le javascript fait mal :'(

Ca sera fait, plus tard.