[forumactif]L'ajout d'une balise BBcode ? Possible !

Date d'inscription: 25/06/2011

L'ajout d'une balise BBcode ? C'est maintenant possible !

Bonjour amis Sopiens, Sopiennes !

Aujourd'hui, tata iju va vous expliquer comment ajouter des balises BBcode sur forumactif...

Mais tout d'abord, je remercie Miettes de m'avoir aiguillée vers un tutoriel du forum des forums Wink

ça m'a beaucoup aidé, et maintenant je vais partager ce que j'ai appris.

Sources : forum des forums. (forum forumactif)

Le code javascript

Donc voilà notre code javascript :

Code:

jQuery(document).ready(function() {
var divs = document.getElementsByTagName('div');
for (i=0; i<divs.length; i++){
if(divs[i] != null && divs[i].className == 'postbody'){
chaine1 = new String('[\[]modo[^[]');
reg = new RegExp(chaine1, 'g');
reg2 = new RegExp('[\[]/modo[^[]', 'g');
contenu = divs[i].innerHTML;
split = contenu.split(" ");
nouveaucontenu = contenu.replace(reg,'<div id="modo"><img style="float:left;margin-right:7px;" src="http://i18.servimg.com/u/f18/14/48/01/34/info11.png" /> <u>ÉDIT MODÉRATION :</u> ').replace(reg2,'</div>');
if(contenu != nouveaucontenu){
divs[i].innerHTML = nouveaucontenu;
}

}
}
});

Mais je vous déconseille de le copier/coller Smile

Il y a quelques subtilités à changer pour que votre balise soit entièrement personnalisable.

ATTENTION ! Cette balise ne fait pas de chose particulièrement élaborée. C'est une base. Juste des raccourcis en quelque sorte.

Code:

chaine1 = new String('[\[]modo[^[]');
reg = new RegExp(chaine1, 'g');
reg2 = new RegExp('[\[]/modo[^[]', 'g');

Cette partie du code vous permettra de mettre les raccourcis, la balise en elle même. En d'autres termes c'est pour que lorsque vous écrivez [modo][/modo], la balise fonctionne.

ici vous pouvez, ou devez changer les "modo" par le raccourci que vous souhaitez.

Code:

nouveaucontenu = contenu.replace(reg,'<div id="modo"><img style="float:left;margin-right:7px;" src="http://i18.servimg.com/u/f18/14/48/01/34/info11.png" /> <u>ÉDIT MODÉRATION :</u> ').replace(reg2,'</div>');

Ici vous pouvez modifier tout ce qui est entre les "div". Sauf le

Code:

').replace(reg2,'</div>')

L'id "modo" est à changer aussi selon votre nom d'id. (je vous expliquerez cela mieux dans la partie css.)

Vous pouvez changer le lien de l'image, ainsi que "édit modération". Cela correspond juste au texte écrit par défaut, tout le temps, dans la balise.

Où mettre le code ?

Aller dans votre PA >>modules>> HTML & JAVASCRIPT>>Gestion des codes Javascript.

Puis faites créer un nouveau javascript. mettez un titre, cochez la case "sur toutes les cases" puis mettez votre javascript dans la case prévue à cet effet.

Le code css

Votre code css se présentera sous cette forme :

Code:

#nom de l'id{

}

Et dedans vous pouvez mettre tout le css que vous voulez. Par exemple, pour moi cela donne cela :

Code:

.quetes {
width: 350px;
min-height:200px;
height:auto;
margin: auto;
padding-left:150px;
padding-top:30px;
padding-bottom:30px;
padding-right:30px;
border: dotted 2px #0d1947;
background-image:url('http://img846.imageshack.us/img846/1889/grim.png');
background-repeat:no-repeat;
background-position: left center;
background-color:#97a3cc;
font-family: perpetua,Courier new;
color:#505873;
font-size:12px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 15px;
}

Attention !

Si dans votre code javascript vous avez mis "div id="nom de l'id"", dans votre code css ce sera :

Code:

#nom de l'id

Si dans votre code js, vous avez mis "div class="nom de la class"", dans votre code css ce sera :

Code:

.nom de la class

Faites attention de ne pas vous emmêler les pinceaux.

Et ensuite ? Comment utiliser la balise BBcode dans un message ?

Rien de plus simple ! Vous écrivez :

Code:

[nom de la balise]
Contenu, bla bla bla bla

[/nom de la balise]

Rien de plus simple !

Toutes les questions sur le tutoriel ici : [clic]