[TUTO] Ajouter du bbcode à une page

**marghost**

Bon pour voir une démonstration de ce que vous allez être capable de créer après avoir lu ce tutorial aller voir : ça
bon on commence tout de suite (liser tout le tuto et les remarques

on a le droit à son opinion )

Premièrement :

Nous alons créer une fonction javascript qui va te permettre d'insérer les smileys dans la boite de texte en cliquant sur une image (je suis nul en java script alors moi meme j'ai demandé de l'aide pour cette fonction)

Code:

P.S. : ce bout de code tu le mets dans le head de ta page

bon ensuite sa nous prend des images a cliquer pour ajouter les fonctions (

)

voici un example de lien simplet

Code:

la le onclick="addText est très important car il va mettre le texte qui est dans les parentèses à l'intérieur de notre champ de texte

TRÈS IMPORTANT
la balise formulaire doit contenir name="forum" sinon rien ne marchera !!
Bon pour les impotants du cerveau voici ce que vous devez faire

Code:

ensuite sa te prend un champ texte qui à comme nom message

Code:

Bon alors une personne voulais savoir comment faire un boutton alors je vais vous montré un formulaire complet

Non ne riez pas de lui ce n'est pas de ça faute

Code:

(il faut que le nom du textarea soit message sinon il faudra qu'il reste le même dans fonction javascript :wink: )

Bon voila sa c'est tout pour ajouter le smiley (ou tout autre bbcode) dans ton champ texte.

Deuxième partie:
Nous sommes rendu à envoyer le script dans une bdd ou à une autre page faites : :o

ensuite il va te faloir, pour des simples précaution, des htmlentities mais il faut que tu le mette avant le str_replace

(si tu choisi le bbcode comme moi pour la protection de ton site c'est très bien)

Voici encore pour les impotants du cervaux un example de htmlentities :

Code:

extract($_POST);
$message = htmlentities ($_POST['message']);

ok ici nous avons un code facultatif que je vais vous montré

Code:

$message = nl2br($message);

(ce script ser a faire un espace quand dans le champ texte la personne a fais un espace

plustot simpa non mais pas aubligatoire vous désiderez)

bon après le htmlentities et le nl2br tu n'a qua faire

Code:

$message= str_replace(":D", "<img src=\"ADRESSE DE L IMAGE\">", $message);

et tu peut mettre ce code autant de fois que tu veux ,en changant l'image et le bbcode de l'image, un à la suite de l'autre.

-----------------------------------------
NOUVEAU AJOUTER DE LA GRANDEUR OU DE LA COULEUR

Bon pour ajouter un choix de couleur à l'utilisateur il n'y a rien de plus simple

Tout d'abord nous alors créé un champ select comme celui ci dessous

Code:

Couleur : <select>
<option style="color: black;" value="">Défaut</option>
<option style="color: darkred;" value="rouge foncé"
onclick="addText(' [color=rouge fonce.?] [/color] ');return(false)"
>Rouge foncé</option>
<option style="color: red;" value="rouge"
onclick="addText(' [color=rouge.?] [/color] ');return(false)"
>Rouge</option>
<option style="color: orange;" value="orange"
onclick="addText(' [color=orange.?] [/color] ');return(false)"
>Orange</option>
<option style="color: brown;" value="Marron"
onclick="addText(' [color=brun.?] [/color] ');return(false)"
>Marron</option>
<option style="color: yellow;" value="jaune"
onclick="addText(' [color=jaune.?] [/color] ');return(false)"
>Jaune</option>
<option style="color: green;" value="vert"
onclick="addText(' [color=vert.?] [/color] ');return(false)"
>Vert</option>
<option style="color: olive;" value="olive"
onclick="addText(' [color=olive.?] [/color] ');return(false)"
>Olive</option>
<option style="color: cyan;" value="cyan"
onclick="addText(' [color=cyan.?] [/color] ');return(false)"
>Cyan</option>
<option style="color: blue;" value="bleu"
onclick="addText(' [color=bleu.?] [/color] ');return(false)"
>Bleu</option>
<option style="color: darkblue;" value="bleu foncé"
onclick="addText(' [color=bleu fonce.?] [/color] ');return(false)"
>Bleu foncé</option>
<option style="color: indigo;" value="indigo"
onclick="addText(' [color=indigo.?] [/color] ');return(false)"
>Indigo</option>
<option style="color: violet;" value="violet"
onclick="addText(' [color=violet.?] [/color] ');return(false)"
>Violet</option>
<option style="color: black;" value="noir"
onclick="addText(' [color=noir.?] [/color] ');return(false)"
>Noir</option></select>

Comme vous pouvez le constater il s'agit d'un select normal avec des noms de couleurs en couleur :q... ce qui change ici c'est le onclick qui permet que quand un champ est sélectionné d'ajouter la balise

Code:

[color=XXXXX.?] [/color]

Vous vous demandez surment a quoi sert le .?] a la fin de chaque onclick..... je vais vous l'expliquer dans une seconde soyez passiant.

Bon ici je sais que ce n'est pas dans mes habitude de donner des code aussi complet ...... mais dison que le select est un cadeau pour que vous n'ayez pas a perdre votre temps a en créer un autre pour rien, c'est si simple de toute façon.

Retournons à nos moutons, Pour la grandeure c'est le même principe :

Code:

Taille : <select>
<option value="7"
onclick="addText(' [size=-5.?] [/size] ');return(false)"
>Très petit</option>
<option value="9"
onclick="addText(' [size=-3.?] [/size] ');return(false)"
>Petit</option>
<option value="12" selected="selected"
onclick="addText(' [size=+0.?] [/size] ');return(false)"
>Normal</option>
<option value="18"
onclick="addText(' [size=+3.?] [/size] ');return(false)"
>Grand</option>
<option value="24"
onclick="addText(' [size=+5.?] [/size] ');return(false)"
>Très grand</option>
</select>

La vous ne tenez plus en place LE .?] SERT A QUOI!!!!!!!!!!!!

attendez encore un peut

nous allons entré dans les str_replace

je vous donne un dernier code complet qui va avec le select de couleur

Code:

$message= str_replace('rouge fonce', 'darkred', $message);
$message= str_replace('rouge', 'red', $message);
$message= str_replace('brun', 'brown', $message);
$message= str_replace('jaune', 'yellow', $message);
$message= str_replace('vert', 'green', $message);
$message= str_replace('bleu', 'blue', $message);
$message= str_replace('bleu fonce', 'darkblue', $message);
$message= str_replace('noir', 'black', $message);

nous allons mettre ces str_replace avant le changemant des autre balises de couleur car sa sert a changer les nom des couleurs de francais à anglais

bon par la suite nous alons créé des str replace pour changer le [color= en <font color="

et les [/color] en </font>

vous faites la meme chose pour le size

C'est la que le .?] entre en jeu...si la personne dans son texte se sert de ] et que nous nous faisont simplement un :

Code:

$message= str_replace(']', '">', $message);

pour fermer les balises de couleur
le texte de la personne va ètre modifier et ce n'est pas ce que nous voulons...non

alors que .?] ...... vous croyez vraiment que la personne va s'en servir dans son texte

alors par souci pour le posteur nous mettons

Code:

$message= str_replace('.?]', '">', $message);

et voila commen mettre de la couleur ou la grandeur du texte dans son bbcode (j'ai fait ce tutorial en 20 min crono alors ce n'est peutètre pas optimisé au maximum mais c'est une tecnique qui marche alors.....pq la changer

-----------------------------------------

Bon ok pour les impotants du cerveau on va pas mettre tout en un seul morceau comme ça sa ne facilite pas le copier collé

Bon pour simplement afficher le petit message dans le cible.php
PS je dit sa pour les quelques boulets qui m'ont poser la question

Code:

echo $message;

et voila c tout tu peux ajouter des bbcode dans ton site

alors j'espère que mon tuto vous a plus

Bon alors je sais que des boulets s'attendent a voir le récapitulatif complet du script ici à la fin mais bon si tu n'est pas capable d'assembler tout ces petits bout de code ensemble c'est que tu n'est pas pret pour sa et tu devra utiliser une autre alternative... :wink:
copyright by mark

vcoolman8888@yahoo.ca

EnVy · Habitué Nombre de messages: 108 Date d'inscription: 29/08/2005

Jen 'arrive pas a réalisez le tutoriel !
sa manque de préssision !
defoi on c'est meme pas se qu'il faux faire !
sa creer meme pas un bouton envoyer !

tu peux l'ameilliorait?

a part sa c'est se que je recherche alors merci quand meme

EnVy · Habitué Nombre de messages: 108 Date d'inscription: 29/08/2005

bon !
voila se que j'ai fait :
la page 1 : 01.php

Citation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
function addText(instext) {
var mess = document.forum.message;
//IE support
if (document.selection) {
mess.focus();
sel = document.selection.createRange();
sel.text = instext;
document.forum.focus();
}
//MOZILLA/NETSCAPE support
else if (mess.selectionStart || mess.selectionStart == "0") {
var startPos = mess.selectionStart;
var endPos = mess.selectionEnd;
var chaine = mess.value;

mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);

mess.selectionStart = startPos + instext.length;
mess.selectionEnd = endPos + instext.length;
mess.focus();
} else {
mess.value += instext;
mess.focus();
}
}
</script>
</head>

<body>
<a href="#" onclick="addText('

');return(false)"><img src="http://ogame286.de/epicblue/gfx/ogame-produktion.jpg" alt="" border="0" /></a>
<form method="post" action="02.php" name="forum" >
<textarea type="text" name="message" style="font-family: Arial,Verdana,Helvetica;font-size: 12px; color:#959796 ; font-weight:bold; background-color: #292929; width:326px; height:254" cols="1" rows="5"></textarea>
<input type="submit" name="submit" value="Envoyer"></form>
<form name="form1" method="post" action="">

</body>
</html>

et la page 2 : 02.php

Citation:

<?
extract($_POST);
$message = htmlentities ($_POST['message']);
$message = nl2br($message);
$message= str_replace("

", "<img src=\"http://ogame286.de/epicblue/gfx/ogame-produktion.jpg\">", $message);
echo"$message";
?>

Sa marche pas !
sa li pas l'envoie ! ( le post )

tirzite

cool vais tester sa voir se que sa donne merci mark

EnVy · Habitué Nombre de messages: 108 Date d'inscription: 29/08/2005

si sa marchez chez toi !
envoye moi le code stp!
ya mon msn ou alors reply sur le forum !
merci

tirzite

chez moi sa marche
mais je crois que tu n'a pas mis un petit echo"$message";
essaye ac sa sur cible.php

tirzite

heu mark ...
tu serait pas comment on fait pour ajouter du code html dans le texte area aussi ??? un peu comme sur le forum.
merci

EnVy · Habitué Nombre de messages: 108 Date d'inscription: 29/08/2005

c'est bon c'est fait

me reste plus cas creer plein de bb !

Mais eu si jeu veu faire un [b] ou [i] ou [url] ...
faux faire quoi ?
(c'est la meme question du dessus mais en mieu fomulez, enfin je pense )

**marghost**

lol mon tuto manque pas de présision c juste qu'a la fin je di pas de faire un $message car je croyai que c'étais évidant

mais bon oui si tu veu voire qqchose tu dois faire sa et je ne l'ai pas aussi marqué car tu peut aussi faire plen de chose comme l'ajouter dans une bdd et tu peut faire plen d'autre chose

.

bon ta enfin réussi a le faire fonctionné bon pour faire dautres balise tu fais le mème lien mais tu change la valeur et dans la balise envoi et tu fais un new replace et voila

.

tirzite

ok merci bcp mark je vais tester ce soir le truc pour du code html dans mon textarea

Tat · Langue pendue Nombre de messages: 71 Date d'inscription: 04/07/2005

impeccable. je suis en traind e coder la messagerie de mon jeu, ca me sera bien utile

merci

_________________

**marghost**

sa fais super plaisir que tu aime mon tutorial car j'ai pris 1h de mon temps pour l'écrire :DD :DD

**marghost**

bon j'ai marquer tout mon formulaire et le petit echo dans le tuto

debutan php · Langue pendue Nombre de messages: 61 Date d'inscription: 23/11/2005

pour l'ajouter a la bdd il faut envoyer l'image dans la bdd et mettre

Code:

$message= str_replace("Very Happy", "<img src=\EMPLACEMENT SUR LA BDD\">", $message);

C'est sa?

Je suis pas sur de tout comprendre pour les balise [b] [i]... je pourais avoir un petit exemple pour les deux?

merci d'avance

**-=[ X-ZoD ]=-**

mark c'es dommage le lien est dead... yorai po moyen den voir une exemple?

_________________