Lancer une discussion
Répondre

   NPDS - BBCodes avancés
Envoyé le  13-07-2008  à  21:01    
Freud
Freud
    611

Bonjour,

Voici quelques temps maintenant qu'il m'a été demandé comment j'avais inclue les BBCodes sur ce site.
Pour la petite histoire, ces codes ne sont pas de moi mais viennent du site Sur-la-Toile.com. J'ai simplement repris ces fonctions pour les adapter à NDPS. Après avoir demandé l'accord de l'administrateur de Sur-la-Toile (Ben) pour publier ces bouts de codes, il m'a avoué lui-même pioché à droite à gauche pour obtenir ce résultat et autorise sans hésitations son partage. Merci Ben

Ces BBCodes sont en place sur EntraidElec depuis un bon moment déjà et certains détails ont pus m'échapper dans la rédaction de ce message, aussi je vous recommande bien-entendu de conserver des copies de vos fichiers avant de les modifier.


  Insertion automatique des BBCodes dans le message



Tout d'abord, vous aurez à insérer des fonctions !!javascript!! dans votre fichier
lib/formhelp.java.php :

bbcodes_java.txt




Ces fonctions gèrent l'affichage de pop-up permettant d'y inclure le texte ou l'url à placer entre les balises.Les balises sont alors automatiquement insérées dans le message à l'emplacement du curseur. Vous devrez définir la forme de vos balises.
Occupez-vous seulement de la fonction DoPrompt().

Exemple :
else if (action == "img") {

var thisImage = prompt("Entrez l'adresse de l'image.", "http://");
var imageBBCode = "";
if (thisImage != null) {doInsert(" " + imageBBCode + " ", "");}
document.coolsus.message.focus();


Lorsque nous appellerons cette fonction, nous lui affecterons une variable. C'est cette variable qui permettra de déterminer le type de BBCode souhaité (image, gras, italique,..).
Dans cette exemple, pour l'appel au BBCode d'insertion d'image, la variable aura pour valeur "img". Vous choisissez pour celle-ci le texte à afficher en pop-up, ici "Entrez l'adresse de l'image". La ligne suivante détermine la balise à utiliser pour son affichage ultérieur. Vous n'êtes pas obligé d'utiliser les crochets. A vous de choisir la syntaxe qui convient la mieux. Gardez cependant à l'esprit que les internautes ont leurs habitudes. Essayez donc de conserver des formats standards.

Exemple 2 :
if (action == 'b') {question = "Entrez le texte à mettre en gras.";}


Ici, le BBCode pendra systématiquement comme syntaxe celle choisie lors de l'appel de la fonction (b, i, center, etc.) entouré de 2 crochets.
Si vous souhaitez utiliser des balises autre, modifiez alors cette ligne :

wrap_tags("[" + action + "]", "[/" + action + "]", question, reponse );

devient par exemple
wrap_tags("@" + action + "@", "@/" + action + "@", question, reponse );



  Appel des fonctions d'insertion



Pour faire appel à ces fonctions, il vous faut modifier la fonction HTML_Add() du fichier functions.php, qui gère l'affichage de vos boutons.

Par exemple :
<a href=\"!!!!javascript!!!!: addText('<b>','</b>');\"><img src=\"editeur/editor_images/med_bold.gif\" border=\"0\" alt=\"\" width=\"18\" height=\"18\" /></a>

devient
<a href=\"!!!!javascript!!!!: DoPrompt('b');\"><img src=\"editeur/editor_images/med_bold.gif\" border=\"0\" alt=\"\" width=\"22\" height=\"22\" /></a></span>


Nous envoyons ici la valeur b pour l'appel au BBCode de mise en caractères gras.


  Affichage des BBCodes



Maintenant que vos messages contiennent des balises, il faut les interpréter. Le navigateur doit donc lire le contenu du message à afficher, déterminer si oui ou non il y a du BBCode, et appliquer les transformations au message.

Commencez par créer une nouvelle fonction dans functions.php que vous appellerez ... bbCode() pourquoi pas !
Dans cette fonction, nous viendrons scruter le message. Si l'une de nos balises est trouvée (ouvrante + fermante), ce qui se trouve entre les 2 prendra la forme que vous souhaitez, ce avec l'aide d'un preg_replace()

preg_replace utilise des expressions rationnelles. Comprendre ce qu'elles sont vous permettra de personnaliser à souhait vous BBCodes.

Les possibilités sont presque infinies, aussi je ne reprendrais ici que les BBCodes les plus courant :

function bbCode($message) {

$message = preg_replace('#\[b\](.*)\[/b\]#Usi', '<b>$1</b>', $message);
$message = preg_replace('#\[i\](.*)\[/i\]#Usi', '<i>$1</i>', $message);
$message = preg_replace('#\[img\](.*)\[/img\]#Usi', '<img src="$1" border="0">', $message);
$message = preg_replace('#\[url\](.*)\[/url\]#Usi', '<a href="$1" target="_blank">$1</a>', $message);
$message = preg_replace('#\[url=([^\]]*)\](.*)\[/url\]#Usi', '<a href="$1" title="$2" target="_blank">$2</a>', $message);
return($message);
}


Exemple :
$message = preg_replace('#\[b\](.*)\[/b\]#Usi', '<b>$1</b>', $message);


Ce code permet de placer entre des balises HTML <b> et </b> tout ce qui ce trouve dans un message entre les balises BBCode et .
(.*)défini le contenu situé entre les balises et comme variable $1. Vous choisissez alors ce qui entourera votre variable $1 après la 1ère virgule. Après la 2ème virgule se trouve la variable à analyser, donc le message.

Donc pour test , le navigateur comprendra <b>test</b> et affichera test


La première ligne destinée aux URL définira tout simplement ce qui se trouve entre les balises correspondantes comme étant à la fois l(URL de destination et le texte à afficher en lien.
La seconde écriture place ce qui se trouve derrière le = comme URL, et ce qui se trouve entre les balises comme texte du lien.

Ce n'est pas un cours sur les expressions régulières aussi je m'arrêterais là. De plus je ne maîtrise pas cela à la perfection et d'autres sites spécialisés seront sans doute plus à même de vous éclairer. Vous pouvez cependant partager à la suite de ce message vos différentes sources liées aux BBCodes, et pourquoi pas créer de nouvelles discussions sur ce forum pour vous faire aider.


Il ne manque pas quelque-chose ?
Ah si, il faut bien appeler cette fonction pour qu'elle serve à quelque-chose !

Et bien sur toutes vos pages permettant un affichage des messages du forum. La plus sollicitée est bien entendu (pour les utilisateurs d'NPDS toujours) viewtopic.php, mais n'oubliez pas les pages offrant une pré-visualisation comme newtopic.php, editpost.php, reply.php mais aussi sur la messagerie privée, etc.

Vous avez déjà l'appel de la fonction smilie() sur ces pages. Placez votre nouvelle fonction avec tout simplement :

if ($allow_bbcode==1) {

$message = Smilie($message);
$message = bbCode($message);
}



Si vous constatez des anomalies ou que vous avez des problèmes dans l'installation de ces scripts, n'hésitez pas !

   [ Message modifié par  Freud  le  25-10-2008  à  12:22 ] 

Attachement(s) : bbcodes_java.txt   
Envoyé le  14-07-2008  à  13:04    
slymule
slymule
    313

Salut Freud,

Au risque de passer pour un dinosaure datant de l'age de glace, c'est quoi le but de tout ça?
Comment ça marche, pourquoi et quand le utiliser?

++
sly
Envoyé le  14-07-2008  à  13:50    
Freud
Freud
    611

Salut Slymule

C'est destiné aux développeurs, en particulier ceux utilisant le même générateur de portail que celui d'EntraidElec, à savoir NPDS.
Le système de BBCodes que j'ai tiré de Sur-la-Toile est au point et intéresse pas mal de monde. J'ai donc demandé à Ben s'il était d'accord pour partager ces informations.

Tu es bien placé pour savoir que j'ai modifier pas mal de choses depuis que j'ai lancé le site. NPDS est issu d'une communauté et permet à des gens comme moi de se lancé sans réelles connaissances en programmation et ce gratuitement. Sans communautés de ce genre, EntraidElec n'aurait jamais vu le jour, aussi c'est une manière de témoigner modestement ma gratitude et d'apporter une petite pierre à l'édifice

Certains se demandent peut-être pourquoi je partage ces informations ici et pas sur le site d'NPDS.
- D'une part, ce site étant le mien, je suis pas mal familiarisé avec et je suis plus à l'aise pour la rédaction, notamment grâce aux BBCodes
- Etant quotidiennement connecté sur EntraidElec, je suis bien évidemment plus joignable ici et serait plus en mesure de répondre aux questions s'il y en a.
- C'est aussi une manière de faire connaître le site. L'objectif N°1 d'un site étant d'être visité et apprécié. Cela peu aider au bouche à oriel et pourquoi pas générer des liens vers le site et améliorer son référencement.
- Pour comprendre et apprécier les fonctionnalités partagées, il est préférable de les avoir testées. Les fonctionnalités proposées sont en place sur le site. Le mieux est encore de se familiariser avec en échangeant directement ici.

Bien entendu EntraidElec n'est pas un site de développement web. Disons que cette partie du forum est un plus, et un clin d'oeil à NPDS.
Je n'ai pas non plus la prétention d'être un développeur hors paire, bien au contraire ! Je fais des boulettes, tout n'est pas codé à la perfection, etc..
Le fait de faire connaître des bouts de code en place ici peu aussi pourquoi pas faire naitre des corrections et contribuer à l'optimisation du site.

Dernières choses. J'ai démarré comme beaucoup de zéro. Aucune connaissance en programmation.
Partager c'est aussi montrer ce qu'il est possible de faire à partir d'un portail clés en main. L'avantage de ces systèmes est que l'on peu mettre en ligne un site sans réelles connaissances au départ, de le garnir au fil du temps et de l'améliorer petit à petit, au fur et à mesure que vous acquérez des compétences.
Enfin, cela aide à faire connaître et perdurer cette communauté, et ainsi permettre au système de continuer d'évoluer et de se moderniser en attirant de nouveaux développeurs potentiels.
C'est bénéfique pour tout le monde.

++
Freud
Envoyé le  14-07-2008  à  20:29    
slymule
slymule
    313

Re freud,

Je te remercie pour ces explicatifs très complets et détaillés.
Je pensais que ça concerné le site et non que c'était des explicatifs pour la création de site

++
sly
Lancer une discussion
Répondre