Connectix Boards

Bienvenue, vous n'êtes pas connecté. ( Se connecter - S'enregistrer )

Dernière version sortie: 0.8.4!
Venez tester la version 1.0 beta :)

Connectix Boards > Vous et votre forum Connectix Boards > Support > [Doc] Utiliser les BBCodes de CB sur son site

RSS >  [Doc] Utiliser les BBCodes de CB sur son site, Parsage + Formulaire
Ishimaru Chiaki #1 18/07/2010 - 08h09

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

Si vous utilisez un forum Connectix Boards et que vous voulez utiliser les BBCodes du forum sur votre site, voici comment l'implémenter.

Prérequis

Tout d'abord, vous devez avoir lu cette page de documentation sur l'initialisation pour utiliser le moteur de CB sur votre site, et appliqué les modifications.  Cette étape est donc essentielle pour la suite.

Utilisation des BBCodes de CB sur son site

Votre site est initialisé, vous pouvez maintenant commencer à utiliser les fonctions relatives aux BBCodes, voire même intégrer un formulaire, pour la rédaction de vos pages statiques.

Fonctions à utiliser

CB dispose de deux fonctions essentielles pour le parsage et le "déparsage" du BBCode dans les données entrantes et à l'édition.

clean() : Parse le BBCode du message vers du HTML.  À utiliser pour les données entrantes
unclean() : A l'inverse, re-parse le HTML en BBCode, pour l'édition ou la citation

Mise en place

Il faudra travailler sur les trois fichiers relatifs à vos champs :
  • [*]Fichier de traitement : le fichier contenant le script d'entrée des données envoyées dans la base de données MySQL
  • [*]Fichier d'édition : Le fichier contenant le formulaire pour éditer les données
  • [*]Fichier d'affichage : Le fichier contenant le script d'affichage dans les pages publiques


Fichier de traitement

Pour chaque donnée sous forme de texte, vous utilisez la fonction clean() de cette façon, au moment où vous sécurisez vos variables avant de les entrer :

           $ma_variable = clean($_POST['ma_variable']);

Selon le contexte, vous avez plusieurs paramètres que vous pouvez utiliser :
- STR_MULTILINE : À utiliser si vous traitez des données multilignes
- STR_PARSEBB : À utiliser si vous voulez utiliser du BBCode dans un champ
- STR_TODISPLAY : Paramètre à utiliser dans le cas où vous voulez afficher le contenu plutôt que l'insérer (ex: prévisualisation des messages)

Exemple d'utilisation d'un paramètre :
           $ma_variable = clean($_POST['ma_variable'],STR_MULTILINE);

Vous pouvez aussi en utiliser plusieurs, en les séparant par des +, comme ceci :
           $ma_variable = clean($_POST['ma_variable'],STR_MULTILINE + STR_PARSEBB);

Fichier d'édition

Pour chaque donnée sous forme de texte à éditer et qui a été traité avec clean(), il faudra utiliser unclean() et cette fois, c'est pas mal plus simple, puisqu'au moment de traiter les variables fraîchement sorties avant leur affichage, vous faites comme ceci :
           $ma_variable = unclean($donnees['ma_variable']);

Fichier d'affichage

Puisque clean() utilise déjà une protection contre les entités HTML (faille XSS), vous n'avez donc pas besoin d'appliquer de htmlspecialchars() ou de htmlentities().

Vous affichez donc tout simplement votre variable telle quelle :
$donnees['ma_variable']

Utiliser le formulaire

Si vous voulez intégrer le formulaire des BBCodes pour la rédaction de vos pages statiques, je fais cette partie pour ceux qui désirent le faire.

À inclure avant tout

Puisque le formulaire des BBCodes utilise du Javascript, il est dont essentiel d'inclure la librairie des javascripts de CB pour que les boutons BBCodes soient utilisables.

Pour notre formulaire, nous aurons besoin de lier deux fichiers .js à l'en-tête du site, en modifiant le chemin selon la page du formulaire.

       <script type="text/javascript" src="votrechemin/include/javascripts/cb_base.js"></script>
       <script type="text/javascript" src="votrechemin/include/javascripts/cb_bbcode.js"></script>

Si votre site se trouve dans un dossier situé à côté du dossier racine du forum, vous devrez faire comme ceci :
       <script type="text/javascript" src="../forum/include/javascripts/cb_base.js"></script>
       <script type="text/javascript" src="../forum/include/javascripts/cb_bbcode.js"></script>

...en remplaçant /forum/ par le nom du dossier racine (ex: /cb/) s'il est différent.

Mise en place du formulaire

En supposant que vous n'utilisez pas de système de templates sur votre site, ce qui est mon cas, voici le code à insérer (en include ou non) juste avant l'élément <textarea> où vous voulez que le script agisse :

           <!-- Module formulaire BBCode -->
           <?php $form_id = 'form_'.genValidCode(); ?>

           <span id="<?php echo $form_id; ?>" class="bbcodeandsmilies">
               <span class="bbcode_input">
                   <input type="button" id="b" value="b" onclick="tag('b', '<?php echo $field_id; ?>');" style="font-weight:bold;" />
                   <input type="button" id="i" value="i" onclick="tag('i', '<?php echo $field_id; ?>');" style="font-style:italic;" />
                   <input type="button" id="u" value="u" onclick="tag('u', '<?php echo $field_id; ?>');" style="text-decoration:underline;" />
                   <input type="button" id="quote" value="quote" onclick="tag('quote', '<?php echo $field_id; ?>');" />
                   <input type="button" id="code" value="code" onclick="tag('code', '<?php echo $field_id; ?>');" />
                   <input type="button" id="img" value="img" onclick='tag_image("<?php echo $field_id; ?>");' />
                   <input type="button" name="url" value="http://" onclick='tag_url("<?php echo $field_id; ?>");' />
                   <input type="button" name="email" value="email" onclick='tag_email("<?php echo $field_id; ?>");' />
                   <input type="button" id="s" value="s" onclick="tag('s', '<?php echo $field_id; ?>');" style="text-decoration:line-through;" />
                   <input type="button" id="spoil" value="spoil" onclick="tag('spoil', '<?php echo $field_id; ?>');" />
                   <input type="button" id="center" value="center" onclick="tag('center', '<?php echo $field_id; ?>');" />
               </span>
               <span class="bbcode_select">
                   <select name="color" class="colorchooser" onchange="tag_select(this.form.color,'<?php echo $field_id; ?>','color');">
                       <option class="colortitle"    selected="selected"     disabled="disabled"><?php echo lang('color'); ?></option>
                       <option value="yellow"     class="coloritem"     style="background-color:yellow;clear:both;">yellow</option>
                       <option value="olive"     class="coloritem"     style="background-color:olive;">olive</option>
                       <option value="lime"     class="coloritem"     style="background-color:lime;">lime</option>
                       <option value="green"     class="coloritem"     style="background-color:green;">green</option>
                       <option value="orange"  class="coloritem"     style="background-color:orange;clear:both;">orange</option>
                       <option value="purple"     class="coloritem"     style="background-color:purple;">purple</option>
                       <option value="red"     class="coloritem"     style="background-color:red;">red</option>
                       <option value="maroon"     class="coloritem"     style="background-color:maroon;">maroon</option>
                       <option value="aqua"     class="coloritem"     style="background-color:aqua;clear:both;">aqua</option>
                       <option value="teal"     class="coloritem"     style="background-color:teal;">teal</option>
                       <option value="blue"     class="coloritem"     style="background-color:blue;">blue</option>
                       <option value="navy"     class="coloritem"     style="background-color:navy;">navy</option>
                       <option value="white"     class="coloritem"     style="background-color:white;clear:both;">white</option>
                       <option value="silver"     class="coloritem"     style="background-color:silver;">silver</option>
                       <option value="gray"     class="coloritem"     style="background-color:gray;">gray</option>
                       <option value="black"     class="coloritem"     style="background-color:black;">black</option>
                   </select>
                   <select name="taille" class="sizechooser" onchange="tag_select(this.form.taille,'<?php echo $field_id; ?>','size');">
                       <option class="sizetitle" selected="selected" disabled="disabled"><?php echo lang('size'); ?></option>
                       <option value="6"  class="sizeitem" style="font-size:6;">6</option>
                       <option value="8"  class="sizeitem" style="font-size:8;">8</option>
                       <option value="9"  class="sizeitem" style="font-size:9;">9</option>
                       <option value="10" class="sizeitem" style="font-size:10;">10</option>
                       <option value="11" class="sizeitem" style="font-size:11;">11</option>
                       <option value="12" class="sizeitem" style="font-size:12;">12</option>
                       <option value="14" class="sizeitem" style="font-size:14;">14</option>
                       <option value="16" class="sizeitem" style="font-size:16;">16</option>
                       <option value="20" class="sizeitem" style="font-size:20;">20</option>
                   </select>
                   <select name="police" class="fontchooser" onchange="tag_select(this.form.police,'<?php echo $field_id; ?>','font');">
                       <option class="fonttitle" selected="selected" disabled="disabled"><?php echo lang('font'); ?></option>
                       <option value="serif"  class="fontitem" style="font-family:serif;">serif</option>
                       <option value="sans-serif"  class="fontitem" style="font-family:sans-serif;">sans-serif</option>
                       <option value="cursive"  class="fontitem" style="font-family:cursive;">cursive</option>
                       <option value="fantasy"  class="fontitem" style="font-family:fantasy;">fantasy</option>
                       <option value="monospace"  class="fontitem" style="font-family:monospace;">monospace</option>
                       <option value="times"  class="fontitem" style="font-family:times;">times</option>
                       <option value="courier"  class="fontitem" style="font-family:courier;">courier</option>
                       <option value="arial"  class="fontitem" style="font-family:arial;">arial</option>
                   </select>
               </span>
               <span class="smilies">
                   <?php echo getSmileyMenu($field_id,17); ?>
               </span>
           </span>

           <script type="text/javascript">
               var form_url = "<?php echo lang('form_inserturl'); ?>";
               var form_mail = "<?php echo lang('form_insertmail'); ?>";
               var form_img = "<?php echo lang('form_insertimg'); ?>";
           </script>

La variable $field_id correspond à l'identifiant du champ à traiter.  Afin d'en faciliter la gestion, déclarez cette variable avant le code des boutons, puis placez cette variable dans l'id et le name du champ.

Exemple d'application :
<?php
$field_id = 'contenu';
?>

           <!-- Module formulaire BBCode -->
           <?php $form_id = 'form_'.genValidCode(); ?>

           <span id="<?php echo $form_id; ?>" class="bbcodeandsmilies">
               <span class="bbcode_input">
                   <input type="button" id="b" value="b" onclick="tag('b', '<?php echo $field_id; ?>');" style="font-weight:bold;" />
                   <input type="button" id="i" value="i" onclick="tag('i', '<?php echo $field_id; ?>');" style="font-style:italic;" />
                   <input type="button" id="u" value="u" onclick="tag('u', '<?php echo $field_id; ?>');" style="text-decoration:underline;" />
                   <input type="button" id="quote" value="quote" onclick="tag('quote', '<?php echo $field_id; ?>');" />
                   <input type="button" id="code" value="code" onclick="tag('code', '<?php echo $field_id; ?>');" />
                   <input type="button" id="img" value="img" onclick='tag_image("<?php echo $field_id; ?>");' />
                   <input type="button" name="url" value="http://" onclick='tag_url("<?php echo $field_id; ?>");' />
                   <input type="button" name="email" value="email" onclick='tag_email("<?php echo $field_id; ?>");' />
                   <input type="button" id="s" value="s" onclick="tag('s', '<?php echo $field_id; ?>');" style="text-decoration:line-through;" />
                   <input type="button" id="spoil" value="spoil" onclick="tag('spoil', '<?php echo $field_id; ?>');" />
                   <input type="button" id="center" value="center" onclick="tag('center', '<?php echo $field_id; ?>');" />
               </span>
               <span class="bbcode_select">
                   <select name="color" class="colorchooser" onchange="tag_select(this.form.color,'<?php echo $field_id; ?>','color');">
                       <option class="colortitle"    selected="selected"     disabled="disabled"><?php echo lang('color'); ?></option>
                       <option value="yellow"     class="coloritem"     style="background-color:yellow;clear:both;">yellow</option>
                       <option value="olive"     class="coloritem"     style="background-color:olive;">olive</option>
                       <option value="lime"     class="coloritem"     style="background-color:lime;">lime</option>
                       <option value="green"     class="coloritem"     style="background-color:green;">green</option>
                       <option value="orange"  class="coloritem"     style="background-color:orange;clear:both;">orange</option>
                       <option value="purple"     class="coloritem"     style="background-color:purple;">purple</option>
                       <option value="red"     class="coloritem"     style="background-color:red;">red</option>
                       <option value="maroon"     class="coloritem"     style="background-color:maroon;">maroon</option>
                       <option value="aqua"     class="coloritem"     style="background-color:aqua;clear:both;">aqua</option>
                       <option value="teal"     class="coloritem"     style="background-color:teal;">teal</option>
                       <option value="blue"     class="coloritem"     style="background-color:blue;">blue</option>
                       <option value="navy"     class="coloritem"     style="background-color:navy;">navy</option>
                       <option value="white"     class="coloritem"     style="background-color:white;clear:both;">white</option>
                       <option value="silver"     class="coloritem"     style="background-color:silver;">silver</option>
                       <option value="gray"     class="coloritem"     style="background-color:gray;">gray</option>
                       <option value="black"     class="coloritem"     style="background-color:black;">black</option>
                   </select>
                   <select name="taille" class="sizechooser" onchange="tag_select(this.form.taille,'<?php echo $field_id; ?>','size');">
                       <option class="sizetitle" selected="selected" disabled="disabled"><?php echo lang('size'); ?></option>
                       <option value="6"  class="sizeitem" style="font-size:6;">6</option>
                       <option value="8"  class="sizeitem" style="font-size:8;">8</option>
                       <option value="9"  class="sizeitem" style="font-size:9;">9</option>
                       <option value="10" class="sizeitem" style="font-size:10;">10</option>
                       <option value="11" class="sizeitem" style="font-size:11;">11</option>
                       <option value="12" class="sizeitem" style="font-size:12;">12</option>
                       <option value="14" class="sizeitem" style="font-size:14;">14</option>
                       <option value="16" class="sizeitem" style="font-size:16;">16</option>
                       <option value="20" class="sizeitem" style="font-size:20;">20</option>
                   </select>
                   <select name="police" class="fontchooser" onchange="tag_select(this.form.police,'<?php echo $field_id; ?>','font');">
                       <option class="fonttitle" selected="selected" disabled="disabled"><?php echo lang('font'); ?></option>
                       <option value="serif"  class="fontitem" style="font-family:serif;">serif</option>
                       <option value="sans-serif"  class="fontitem" style="font-family:sans-serif;">sans-serif</option>
                       <option value="cursive"  class="fontitem" style="font-family:cursive;">cursive</option>
                       <option value="fantasy"  class="fontitem" style="font-family:fantasy;">fantasy</option>
                       <option value="monospace"  class="fontitem" style="font-family:monospace;">monospace</option>
                       <option value="times"  class="fontitem" style="font-family:times;">times</option>
                       <option value="courier"  class="fontitem" style="font-family:courier;">courier</option>
                       <option value="arial"  class="fontitem" style="font-family:arial;">arial</option>
                   </select>
               </span>
               <span class="smilies">
                   <?php echo getSmileyMenu($field_id,17); ?>
               </span>
           </span>

           <script type="text/javascript">
               var form_url = "<?php echo lang('form_inserturl'); ?>";
               var form_mail = "<?php echo lang('form_insertmail'); ?>";
               var form_img = "<?php echo lang('form_insertimg'); ?>";
           </script>

<textarea name="<?php echo $field_id; ?>" id="<?php echo $field_id; ?>" cols="30" rows="10"></textarea>

Déjà, vos boutons sont normalement fonctionnels, à condition bien sûr que vous ayez autorisé les scripts de la page (avis aux Noscript-users).

Les smileys

Votre formulaire est fonctionnel, mais vous n'avez pas vos smileys, puisque le script cherche les smileys à partir du dossier où se trouve votre page de rédaction.  Pour les avoir, vous devrez donc copier tout le dossier /smileys/ avec son contenu dans le dossier de chacune des pages de rédaction ou de publication où les smileys s'afficheront.

Voilà, il ne vous reste plus qu'à mettre en forme ce formulaire avec un peu de CSS pour mieux l'intégrer à la charte graphique de votre site. :)


Document rédigé par Ishimaru Chiaki.
Ce message a été édité par Martin le 27/07/2010 à 09h39.
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
dixy #2 18/07/2010 - 20h14

Groupe : Modérateur
Messages : 1060
Enregistré le : 06/02/2005

Hors ligne Site Web

Ishimaru Chiaki @ 18/07/2010 - 08h09 a dit:

- STR_TODISPLAY : Paramètre de sécurité contre les injections SQL.  J'ai remarqué qu'il est appliqué surtout aux champs à éditer dans la table des recherches, ainsi qu'au contenu du message en prévisualisation.  [Besoin de Martin pour clarifier ce point]


Non ce paramètre ne protège pas contre les injections SQL.
Il sert si tu veux afficher les données au lieu de les insérer dans la base de données.
Posted Image BrightMarks : gérer vos notes scolaires
Ishimaru Chiaki #3 18/07/2010 - 21h42

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

Merci, je corrige ça !
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Martin #4 19/07/2010 - 22h40

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Waw, bien vu, merci!
Dans la version 1.0, l'insertion de formulaires de gestion de messages sera nettement simplifiées par l'utilisation des templates  ^^
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
haoxi #5 22/07/2010 - 18h56

Groupe : Nouveau
Messages : 19
Enregistré le : 06/01/2010

Hors ligne

Salut,

Alors déjà merci beaucoup de m'avoir fait ce tuto aussi vite aussi complet et aussi facile a utiliser FÉLICITATION a toi :D

Tout marche correctement juste tu a oublier un " Et oui le code ne marchais pas puis en voulant changer le textarea j'ai vue que a ta dernière ligne :

<textarea name="<?php echo $field_id; ?>" id="<?php echo $field_id; ?> cols="30" rows="10"></textarea>

Il te manquais un guillmet :p Juste avant ton cols ;) Rajoute le sur ton post ^^.


Merci encore bonne continuation,
Haoxi,
Ce message a été édité par haoxi le 22/07/2010 à 18h57.
Ishimaru Chiaki #6 23/07/2010 - 03h30

Groupe : Doc-rédacteur
Messages : 800
Enregistré le : 12/03/2008

Hors ligne Site Web

Merci, je corrige ! :)
Besoin de volontaires pour les tests du support IPv6 dans la future version 0.8.5 !
Plus d'informations ici
Mon fil Twitter
Jeff #7 23/07/2010 - 09h48

Groupe : Habitué
Messages : 114
Enregistré le : 20/10/2009

Hors ligne

Ca c'est du boulot.  :p

Clap ! Clap !  :D

Ishi tu es la reine  :)
finalbob #8 26/07/2010 - 13h16

Groupe : Modérateur
Messages : 718
Enregistré le : 08/03/2007

Hors ligne Site Web

yep ! :D
youplaboum !
Posted Image
tout mes MODs pour cb
Martin #9 27/07/2010 - 09h43

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Un petit article en plus dans la doc: ici.

Encore un tout grand merci à toi, Ishi!
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges

 >  Réponse rapide

Composez votre message

Connectix Boards > Vous et votre forum Connectix Boards > Support > [Doc] Utiliser les BBCodes de CB sur son site

 >  Informations du forum

1 personne(s) présente(s) durant une période de 15 minutes (0 membre(s) et 1 invité(s)).