[TUTO] L'éditeur du forum - fonctionnement

Commençons par une chose toute simple : apprendre le BBcode n'est pas si compliqué qu'il n'y parait. Observez le comportement des icônes, observez comment le code fonctionne. Pour coder un comportement il utilise des balises entre crochets : [balise]mon texte[/balise].

Sachez que l'éditeur vous sert à coder sans que vous ayez à retenir la syntaxe des codes.
Pour coder un texte, il suffit la plupart du temps de surligner celui-ci et de cliquer sur l'icône correspondant à vos désirs secrets...

- Les balises de style de caractère :


B : pour écrire en gras
I : pour écrire en italique
U : pour souligner
S : pour barrer

Sélectionnez votre texte et cliquez sur l'icône de votre choix.

- Les balises de position de texte :


De gauche à droite :





Sélectionnez votre texte et cliquez sur l'icône de votre choix.

- Les balises de listes :


le texte suivant, en utilisant les balises de gauche à droite :
Sélectionnez le texte et cliquez sur l'icône correspondante.

la batterie, qui assure le tempo et la dimension rythmique
la guitare basse, ou la contrebasse, qui joue la partie basse
parfois la guitare rythmique réalise les accords (comme dans le ska, par exemple) ou le piano
parfois les percussions

• la batterie, qui assure le tempo et la dimension rythmique
  
• la guitare basse, ou la contrebasse, qui joue la partie basse
  
• parfois la guitare rythmique réalise les accords (comme dans le ska, par exemple) ou le piano
  
• parfois les percussions

1. la batterie, qui assure le tempo et la dimension rythmique
   
2. la guitare basse, ou la contrebasse, qui joue la partie basse
   
3. parfois la guitare rythmique réalise les accords (comme dans le ska, par exemple) ou le piano
   
4. parfois les percussions
   

La liste va mériter un petit effort de votre part, elle réalise pour vous la première ligne, pour coder les autres lignes il faut les faire précéder d'un [*].

- Insérer une ligne :


Cliquez sur cette icône pour insérer une ligne. Comme ceci :

---

- Icône de citation :


Effet :

Citation :

Solistes, Armstrong mais surtout Parker et Coltrane ont frayé leur piste en solitaires. On les admire toujours pour avoir consommé la rupture avec la tradition qui les nourrissait, et nié, à un certain moment, le monde. Le prix de leur parole se fonde sur son unicité. Tout autant que le leur, sans doute, l'art ellingtonien peut revendiquer la nouveauté et l'originalité. Mais c'est un art qui ne peut se concevoir sans le monde et sans les autres, sans une acceptation fondamentale de l'antériorité et de l'altérité.

Sélectionnez votre texte et cliquez sur l'icône.

- Afficher du code :


Permet aux geek comme moi d'afficher du code sans risquer d'artefacts :

Code:

on (release) {
if (root.Hyperlink != null) {
getURL(root.Hyperlink);
} else if (root.clickTag != null) {
getURL(root.Hyperlink);
} else {
getURL("http://jazzpeople.forumgratuit.fr");
}
}

Sélectionnez votre texte et cliquez sur l'icône.

- Réaliser un tableau :


Une boîte de dialogue apparait : spécifiez le nombre de lignes (première case) et le nombre de colonnes (deuxième case).
Exemple :


Entre chaque balise "tr" vous trouverez une ligne, entre chaque balise "td", une colonne (donc une case) : c'est entre les balises "td" que vous mettrez votre texte.

On poursuit avec l'exemple :

C Am7	Dm7 G7	C Am7	Dm7 G7	C C7	F Fm	C Am7	Dm7 G7
C Am7	Dm7 G7	C Am7	Dm7 G7	C C7	F Fm	C	%

- Gérer les images :


Ces deux icônes ouvrent un menu contextuel.

la première icône ouvre le menu suivant :

Cela permet d'héberger votre image sur l'hébergeur dédié du forum (servimg).

Choisissez fichier/parcourir si l'image se trouve sur votre ordinateur, ou url si celle-ci se trouve en ligne (attention dans le champ de saisie vous devrez obligatoirement entrer une url commençant par http:// et se terminant par .ext (ext étant une extension d'image)).
Choisissez vos options de redimensionnement dans le menu déroulant et cliquez sur envoyer. Vous obtenez deux codes (l'image en miniature), l'image avec un lien vers Servimg et le lien direct vers l'image.

La seconde icône ouvre le menu suivant.

Celle-ci vous permet d'afficher les images dans le corps de texte.
Dans le champ de saisie vous devrez obligatoirement entrer une url commençant par http:// et se terminant par .ext (ext étant une extension d'image). Cliquez sur OK pour envoyer la purée.


- Balise hyperlien, lien hypertexte :

Ouvre un menu contextuel : dans le champ de saisie du haut, entrez votre url, dans celui du bas, entrez le texte qui s'affichera et enverra vos lecteur vers l'url choisie.

Exemple :


le forum le plus sympa


- Gestion du contenu flash :


la deuxième icône permet d'afficher une vidéo de Youtube ou de Dailymotion (n'oubliez pas les balises spoiler !).
Ceci est expliqué en détail ici.

La première icône, qui permet d'afficher du contenu flash directement dans le message, ouvre un menu contextuel :


Spécifiez dans les deux cadres du haut les dimensions de votre animation.
Entrez le lien direct (commence par http:// et se termine par .swf) dans la deuxième ligne.

Exemple (mis entre balises spoiler pour ne pas vous rendre fous) :

Spoiler:

- Balises de style de texte :


Première icône : gère la taille du texte
Deuxième icône : gère la couleur du texte
Deuxième icône : gère la police de caractère

Sélectionnez votre texte et cliquez sur l'icône correspondante, puis faites votre choix dans le menu déroulant.


- Les balises "autres" :


Indice : _{I love jazz !}
Exposant : ^{I love jazz !}
Spoiler :

Spoiler:

Caché :
Défilement horizontal : I love jazz !
Défilement vertical : I love jazz !
Aléatoire :

Nombre aléatoire (1,50) :

18

Wow : [wow]23032[/wow]

Voilà c'est terminé, enfin ! (le petit bouton "aide" en point d'interrogation vous apprendra la même chose que ce tuto, les images et le fun en moins. :mrgreen: