Les BBcode

11 juin 2009, 13:17

Bonjour,

Ca m'attire la facon dont phpfrance a fait ses BBcode, quand je clique sur "B" ca change vers "B*", ca veut dire il faut fermer le tag <b>, puis je avoir un coup de main sur comment faire ca??

Merci[/quote]

11 juin 2009, 13:19

Tourne toi du coté javascript

Si tu veux un BBCode complet, renseigne-toi sur FCKEditor.

11 juin 2009, 14:36

Effectivement c'est du javascript.
Simplement quand on clique sur l'image ça change la source de l'image et au click suivant on revient à l'original. Par exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<script type="text/javascript">
function change_img(id,img1,img2)
{
this.bascule = (typeof this.bascule == 'number')? this.bascule * (-1) : -1;

if(this.id = document.getElementById(id))
	{
	this.id.src = (this.bascule == -1)?  img2 : img1;
	}
}
</script>

</head>

<body>
<img id = "mon_image" onclick = "change_img(this.id,'source_image1.png','source_image2.png')" src="source_image1.png"  alt = "Bouton bascule"  title = "Bouton bascule" />
</body>
</html>

11 juin 2009, 15:45

Sur PHPBB c'est juste l'attribut "value" du bouton qui est modifié pour qu'il affiche "B*"

12 juin 2009, 03:12

Merci AB

12 juin 2009, 13:43

Pour exemple voici un code qui fonctionnera pour changer plusieurs images, ou changer la valeur de plusieurs boutons (pour tenir compte de la remarque de momox).
Par rapport au code précédent on mémorise l'état de la "bascule" de chaque élément dans un tableau.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<script type="text/javascript">
function change_img(id,img1,img2)
{

this.bascule = (typeof this.bascule == 'undefined')? Array() : this.bascule;

this.bascule[id] = (typeof this.bascule[id] == 'number')? this.bascule[id] * (-1) : -1;

if(this.id = document.getElementById(id))
	{
	this.id.src = (this.bascule[id] == -1)?  img2 : img1;
	}
}


function Change_value(id,value1,value2)
{

this.change_value = (typeof this.change_value == 'undefined') ? Array() : this.change_value;

this.change_value[id] = (typeof this.change_value[id] == 'number')? this.change_value[id] * (-1) : -1;

if (this.id = document.getElementById(id))
	{
	this.id.value = (this.change_value[id] == -1)?  value2 : value1;
	}
}
</script>

</head>

<body>
<img id = "id_image1" onclick = "change_img(this.id,'source_image1.png','source_image2.png')" src="source_image1.png" alt = "Image bascule" title = "Image bascule" />
<img id = "id_image2" onclick = "change_img(this.id,'source_image3.png','source_image4.png')" src="source_image3.png" alt = "Image bascule" title = "Image bascule" />

<input type="button" id = "gras" value = "B" onclick = "Change_value(this.id,'B','B *')" style="width:25px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;padding-left:5px;border:1px solid black" title = "Bouton bascule" />
<input type="button" id = "italique" value = "I" onclick = "Change_value(this.id,'I','I *')" style="width:25px; font-family:Arial, Helvetica, sans-serif; font-style:italic;padding-left:5px;border:1px solid black" title = "Bouton bascule" />
</body>
</html>

Cela dit c'est juste pour montrer le principe du on/off.

Les BBcode dans ce forum sur plus élaborés puisque les balises sont "surveillées" pour être cohérentes. Ainsi si l'on ouvre une balise "gras" puis une balise "italique", il suffit de refermer la balise "gras" pour refermer automatiquement la balise "italique".
Tu peux regarder le code source de la page d'envoi de message pour plus d'infos.

13 juin 2009, 02:02

J'ai 2 autres questions:

- Quand je fais la saisie d'un texte dans un textarea, je le selectionner afin d'appliquer les bbcodes, mais en vain, les bbcodes se mettent juste apres mon texte, comment faire pour resoudre ce probleme?

_ Pour l'insertion d'une image le bbcode est comme ca: [image][/image], alors que si on veut l'afficher comme html, le code doit etre ainsi: <img src="nom_image.ext">, comment peut on progresser sur ca, ou bien y a t il une autre methode?

merci

14 juin 2009, 21:01

Une source avec le code ici
http://actuel.fr.selfhtml.org/articles/ ... /index.htm

Pour ta deuxième question c'est une transformation que l'on fait en php. Tu peux utiliser str_replace() pour faire tes remplacement ou des expressions régulières tel que dans le tuto du siteduzero.com -> php ->tutoriel sur les expression régulières (deuxième page) . Je peux pas te donner le lien directement car le site du zero est en rade pour l'instant.

15 juin 2009, 15:45

Donc puisque le site du zero re fonctionne voici un exemple http://www.siteduzero.com/tutoriel-3-14 ... #ss_part_4 avec des regex

16 juin 2009, 01:48

Merci AB pour les exemple, e desole pour le retard, les exams

16 juin 2009, 02:15

Au cas où... javascript est bien plus difficile à débugger que php... Si tu cherches un outil de débuggage js, le module firebug de FF est un bon outil.

16 juin 2009, 04:46

J'ai essaye tout en l'integrant sur mon code, il m'affiche "undefined"

<script type="text/javascript">
<!--
function bbcode(repdeb, repfin) {
  var input = document.forms['Insertion'].elements['desc'];
  input.focus();
  /* pour l'Explorer Internet */
  if(typeof document.selection != 'undefined') {
    /* Insertion du code de formatage */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = repdeb + insText + repfin;
    /* Ajustement de la position du curseur */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -repfin.length);
    } else {
      range.moveStart('character', repdeb.length + insText.length + 

repfin.length);
    }
    range.select();
  }
  /* pour navigateurs plus récents basés sur Gecko*/
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Insertion du code de formatage */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + repdeb + insText + 

repfin + input.value.substr(end);
    /* Ajustement de la position du curseur */
    var pos;
    if (insText.length == 0) {
      pos = start + repdeb.length;
    } else {
      pos = start + repdeb.length + insText.length + repfin.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* pour les autres navigateurs */
  else
  {
    /* requête de la position d'insertion */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Insertion à la position (0.." + input.value.length 

+ "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Insertion du code de formatage */
    var insText = prompt("Veuillez entrer le texte à formater:");
    input.value = input.value.substr(0, pos) + repdeb + insText + 

repfin + input.value.substr(pos);
  }
}
//-->
</script>

<form action="bbcode.php" method="post" name="Insertion">
<textarea name="desc" cols="60" rows="10" class="Textarea01">
ok
</textarea>

16 juin 2009, 04:56

Recopie tout le code de l'exemple ça devrait aller mieux.

16 juin 2009, 05:05

J'ai teste l'exemple ca mmarche bien, mais tout en modifiant 'formulaire' par 'Insertion' et 'saisie' par 'desc' et l'integrant dans ma page ca marche pas, je vais rien modifier et voir tout ca

Les BBcode

Qui est en ligne