L'installation se déroule par ici, suivez l'ordre des sections si possible :

• Introduction
• Principe de fonctionnement
• Avant l'installation

L'installation à proprement parlée se déroule ici, et vous avez le choix entre 3 types d'installation (minimale à complète), faîtes votre choix selon ce que vous souhaîtez :

1. Installation des smileys seulement
2. Installation des smileys et des tags seulement
3. Installation des smileys, des tags et des citations

Et voici des chapitres annexes (mais importants) pour configurer correctement TagComment :

• Introduction aux expressions régulières
• Personnalisation de la barre des icônes
• Personnalisation du module de conversion
• Personnalisation du module de vérification des tags
• Configuration CSS

Dans TagComment, 3 nouvelles classes de style CSS sont définies dans la Feuille de Style Générale de votre blog dans l'interface d'administration Canalblog.

.blogbody .comIconImg

Cette classe est utilisée ^sur les icônes de la barre d'icône et également le bouton permettant de faire une citation de commentaire.

.blogbody .comIconImg:hover

Cette classe permet de faire un effet de roll-over sur ces icônes.

Les 2 classes de style suivantes ne vous concerne que si vous avez choisi l'installation complète (avec les citations) de TagComment (vérifiez dans la Notice d'installation).

.blogbody .commentQuoteHeader

Cette classe définit le style du <div> de l'entête d'une citation, là où on verra un titre simple "Citation :" ou plus étendu : "Citation : ZEL - le 13 mai 2008 à 12:07".

.blogbody .commentQuoteBody

Cette classe définit le style du <div> du corps de la citation.

Cette section ne vous concerne PAS SI vous avez décider de n'installer que les smileys seulement. Vérifiez dans la Notice d'installation.

Récupérez le fichier tag_comment.js (si vous ne l'avez pas, allez voir dans la Notice d'installation et choisissez votre installation).

Avant d'aller plus loin, assurez vous que vous avez bien pigé comment fonctionnent les expressions régulières.

Le module de vérification de tags est ce qui va empêcher un utilisateur de pourrir la configuration de votre blog par mégarde lorsqu'il utilisera des tags dans ses commentaires.

Vous aurez donc à définir des couples de tags dans un tableau qui sera parcouru pour vérifier que ces couples sont complets.

Il est important que les tags que vous avez défini dans le module de conversion soient bien TOUS vérifiés ici.

Rendez-vous donc dans tag_comment.js à la section commentée :

/********************************
* Data definition section
********************************/

Le tableau est défini à cet endroit :

i = 0;
tagCoupleArray = new Array();

Et chacun des remplacements est défini dans le tableau par une ligne du type :

tagCoupleArray[i++] = new TagCouple("[b]", "[/b]",
                                    "\\[b\\]", "\\[/b\\]");

Ces lignes sont là à titre d'exemple et définisse 3 couples de tags à vérifier. Il faut que vous ajoutiez vos propres couples :

tagCoupleArray[i++] = new TagCouple("<DESC_BAL_OUVE>", "<DESC_BAL_FERM>",
                                    "<EXRG_BAL_OUVE>", "<EXRG_BAL_FERM>");

... où :

• <DESC_BAL_OUVE> est la description simple de la balise ouvrante du couple. Ce sera affiché dans le message d'erreur si la balise ouvrante vient à manquer.
• <DESC_BAL_FERM> est la description simple de la balise fermante du couple. Ce sera affiché dans le message d'erreur si la balise fermante vient à manquer.
• <EXRG_BAL_OUVE> est l'expression régulière qui définit la balise ouvrante. Elle sera recherchée dans le texte tapé dans la zone de saisie de commentaire.
• <EXRG_BAL_FERM> est l'expression régulière qui définit la balise fermante. Elle sera recherchée dans le texte tapé dans la zone de saisie de commentaire.

Regardez les exemples, ils sont là pour ça.

Le module de vérification vérifie que les nombres de balises ouvrantes et fermantes est le même pour les expressions régulières définies dans le tableau. Sinon, il se sert des descriptions pour afficher un code d'erreur et empêche l'envoi du commentaire.

ATTENTION aux conflits de recherche d'expression régulière. Voir la fin de la note sur le module de conversion.

Récupérez le fichier tag_comment.js (si vous ne l'avez pas, allez voir dans la Notice d'installation et choisissez votre installation).

Avant d'aller plus loin, assurez vous que vous avez bien pigé comment fonctionnent les expressions régulières.

Le module de conversion est ce qui va transformer un commentaire avec des symboles et des tags comme ":-)" ou "[b] [/b]" par le texte et les balises HTML correspondantes tel que VOUS l'aurez défini.

D'une manière générale ça remplace n'importe quelle expression régulière par un texte ; et tout celà défini par vous dans un tableau Javascript.

Rendez-vous donc dans tag_comment.js à la section commentée :

/********************************
* Data definition section
********************************/

Le tableau est défini à cet endroit :

i = 0;
expRepArray = new Array();

Et chacun des remplacements est défini dans le tableau par une ligne du type :

expRepArray[i++] = new ExpRep("(:\\))|(:-\\))|(:o\\))",
                 "<img alt=\":)\" src=\"http://site.fr/blog/smiley.gif\" />");

Ces lignes sont là à titre d'exemple et définissent 11 conversions de texte. Il faut que vous ajoutiez vos propres expressions régulières et le texte de remplacement correspondant, et ce pour chaque smiley ou balise (ouvrante ET fermante) ou toute autre expression.

expRepArray[i++]  = new ExpRep("<EXP_REG>",
                               "<REMPLACE>");

... où :

• <EXP_REG> est l'expression régumière qui est recherchée dans le commentaire et qui sera remplacée.
• <REMPLACE> est le texte (muni de balise HTML ou non) qui remplacera le texte détecté par <EXP_REG>.

Regardez les exemples, ils sont là pour ça.

A propos des couples de balises comme "[b]" et "[/b]" (remplacées par "<strong>" et "</strong>") il est important de les définir individuellement SANS oublier l'une d'entre elle.

Sinon, les balises ouvrantes ou fermantes seraient définies seules et n'auraient pas leur balise correspondante pour les refermer et ça endommagerait la mise en page de votre blog.

A ce propos, il est tout à fait possible d'utiliser ce module de conversion pour bannir certaines expressions et les remplacer par d'autres.

Par exemple, vous pouvez vouloir censurer les commentaires en remplaçant des gros mots par des étoiles.

Ou alors, vous pouvez effacer une expression si vous mettez une chaîne de caractères vide dans <REMPLACE>.

ATTENTION des expressions que vous allez remplacer et de leur ordre de définition, car des conflits peuvent apparaître, ou des pexressions peuvent être remplacées sans que vous vous y attendiez.

Par exemple, si vous remplacez ":-)" par "<img alt=\":)\" src=\"http://site.fr/blog/smiley.gif\" />" et derrière vous remplacez le smiley ":/" par "<img alt=\":)\" src=\"http://site.fr/blog/bof.gif\" />", la balise IMG du premier smiley va être détruite par le second car il aura détecter le ":/" dans le "http://".

D'autres effets de conflits plus pernicieux peuvent être détectés (par exemple évitez la détection de smileys comme "><")

Récupérez le fichier tag_comment.js (si vous ne l'avez pas, allez voir dans la Notice d'installation et choisissez votre installation).

Avant d'aller plus loin, assurez vous que vous avez bien mis en ligne toutes les icônes qui apparaîtront sur la barre.

La barre est construite par une fonction Javascript qui parcourt un tableau défini dans tag_comment.js.

C'est ce tableau que nous allons modifier.

Rendez-vous donc dans tag_comment.js à la section commentée :

/********************************
* Data definition section
********************************/

Le tableau est défini à cet endroit :

i = 0;
iconsArray = new Array();

Et chacune des icônes est définie dans le tableau par une ligne du type :

iconsArray[i++]  = new CommentIcon("http://site.fr/blog/smiley.gif",
                                   ":)", "");

Ces lignes sont là à titre d'exemple et définisse une barre de 6 icônes. Mais ça ne fonctionnera pas tel quel. Il faut donc que vous ajoutiez vos propres définition d'icônes comme suit :

iconsArray[i++]  = new CommentIcon("<URL_ICONE",
                                   "<TAG_AVT_SEL>", "<TAG_APR_SEL>");

... où :

• <URL_ICONE> est l'URL complète de l'image qui vous servira d'icône dans la barre. Ce peut être un smiley ou une image de bouton représentant des tags. Si l'URL n'existe pas où n'est pas trouvez alors le texte formé par la concaténation de <TAG_AVT_SEL> et <TAG_APR_SEL> s'affichera à la place.
• <TAG_AVT_SEL> est le texte qui s'affichera avant la sélection dans la zone de saisie de commentaire.
• <TAG_APR_SEL> est le texte qui s'affichera après la sélection dans la zone de saisie de commentaire.

Dans le cas d'un smiley ou d'une manière générale d'un texte qui n'entoure pas la sélection, <TAG_APR_SEL> peut être vide.

Bref, regardez les exemples, ils sont là pour ça.

Uploadez vos smileys sur Internet (par FTP par exemple).

Vous pouvez le faire par Canalblog mais si vous devez modifier vos fichiers, Canalblog leur donnera un nom différent (un numéro d'ID) et ça vous obligera à modifier les endroits où les noms de fichiers sont référencés.

Récupérez tag_comment.js. Vous devrez le modifier en fonction des smileys que vous voulez ajouter, rendez-vous donc aux sections idoines :

• Personnalisation de la barre des icônes

• Personnalisation du module de conversion

... et mettez le en ligne.

Ensuite, il va vous falloir éditer les fichiers du modèle de votre blog.

Rendez vous donc dans le menu Apparence, et Editer les fichiers de ce modèle sur le modèle en cours.

Dans la liste déroulante sélectionnez : "Page d'un message"

Voici la liste des modifications à faire sur cette page.

• Insertion du code javascript (remplacez http://site.fr/blog/tag_comment.js par le lien vers l'endroit où vous avez uploadé tag_comment.js) :

<script language="Javascript" src="http://site.fr/blog/tag_comment.js"></script>

Entre :

<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />

Et :

</head>

• Astuce de remplacement et formatage des commentaires :

<form>
  <textarea id="commentStr<$BlogCommentId$>" style="left: 0; top: 0; position: absolute; visibility: hidden;" rows=1><$BlogCommentBody$></textarea> 
</form>
<p>
  <script language=javascript>
  <!--
    var v_str = document.getElementById("commentStr<$BlogCommentId$>").value;
    formatComment(v_str);
  //-->
  </script>
</p>

A la place de :

<p><$BlogCommentBody$></p>

• Insertion de la barre d'icônes au dessus de la zone de saisie du commentaire :

<script language=javascript>
<!--
  displayCommentIcons();
//-->
</script><br />

Entre :

<input id="commentTitle" name="commentTitle" value="" maxlength="128" />
</p>

Et :

<p>
<label for="commentBody">

Maintenant dans la liste déroulante, sélectionnez "Feuille de style générale".

Ajoutez les styles comIconImg (et comIconImg:hover pour faire un effet de rollover sur les boutons de la barre des icônes), après la définition du style ".blogbody .itemfooter".

.blogbody .comIconImg {
    border-style: solid;
    border-width: 1px;
    border-color: #FFDDFF;
}
.blogbody .comIconImg:hover {
    border-style: dotted;
    border-width: 1px;
    border-color: #990099;
    background-color: #EFFFF5;
}

Et changez les paramètres donnés en exemple ci-dessus avec votre propre configuration.

Uploadez icônes et boutons sur Internet (par FTP par exemple).

Vous pouvez le faire par Canalblog mais si vous devez modifier vos fichiers, Canalblog leur donnera un nom différent (un numéro d'ID) et ça vous obligera à modifier les endroits où les noms de fichiers sont référencés.

Récupérez tag_comment.js. Vous devrez le modifier en fonction des boutons ou smileys que vous voulez ajouter, rendez-vous donc aux sections idoines :

• Personnalisation de la barre des icônes
• Personnalisation du module de conversion
• Personnalisation du module de vérification des tags

... et mettez le en ligne.

Ensuite, il va vous falloir éditer les fichiers du modèle de votre blog.

Rendez vous donc dans le menu Apparence, et Editer les fichiers de ce modèle sur le modèle en cours.

Dans la liste déroulante sélectionnez : "Page d'un message"

Voici la liste des modifications à faire sur cette page.

• Insertion du code javascript (remplacez http://site.fr/blog/tag_comment.js par le lien vers l'endroit où vous avez uploadé tag_comment.js) :

<script language="Javascript" src="http://site.fr/blog/tag_comment.js"></script>

Entre :

<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />

Et :

</head>

• Astuce de remplacement et formatage des commentaires :

<form>
  <textarea id="commentStr<$BlogCommentId$>" style="left: 0; top: 0; position: absolute; visibility: hidden;" rows=1><$BlogCommentBody$></textarea>
</form>
<p>
  <script language=javascript>
  <!--
    var v_str = document.getElementById("commentStr<$BlogCommentId$>").value;
    formatComment(v_str);
  //-->
  </script>
</p>

A la place de :

<p><$BlogCommentBody$></p>

• Vérification du commentaire en amont :

<form action="" method="post" name="frmComment" id="frmComment" onsubmit="return checkCommentAndSubmit(this)">

A la place de :

<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">

• Insertion de la barre d'icônes au dessus de la zone de saisie du commentaire :

<script language=javascript>
<!--
  displayCommentIcons();
//-->
</script><br />

Entre :

<input id="commentTitle" name="commentTitle" value="" maxlength="128" />
</p>

Et :

<p>
<label for="commentBody">

• Zone d'affichage d'erreur dans la saisie du commentaire :

<strong><span id="comErrorMessage"></span></strong>

Entre :

<input  type="submit" name="submit" value="Envoyer" />

Et :

<br />
</form>

Maintenant dans la liste déroulante, sélectionnez "Feuille de style générale".

Ajoutez les styles comIconImg (et comIconImg:hover pour faire un effet de rollover sur les boutons de la barre des icônes), après la définition du style ".blogbody .itemfooter".

.blogbody .comIconImg {
    border-style: solid;
    border-width: 1px;
    border-color: #FFDDFF;
}
.blogbody .comIconImg:hover {
    border-style: dotted;
    border-width: 1px;
    border-color: #990099;
    background-color: #EFFFF5;
}

Et changez les paramètres donnés en exemple ci-dessus avec votre propre configuration.

Uploadez icônes et boutons sur Internet (par FTP par exemple).

Vous pouvez le faire par Canalblog mais si vous devez modifier vos fichiers, Canalblog leur donnera un nom différent (un numéro d'ID) et ça vous obligera à modifier les endroits où les noms de fichiers sont référencés.

Récupérez tag_comment.js. Vous devrez le modifier en fonction des boutons ou smileys que vous voulez ajouter, rendez-vous donc aux sections idoines :

• Personnalisation de la barre des icônes
• Personnalisation du module de conversion
• Personnalisation du module de vérification des tags

... et mettez le en ligne.

Ensuite, il va vous falloir éditer les fichiers du modèle de votre blog.

Rendez vous donc dans le menu Apparence, et Editer les fichiers de ce modèle sur le modèle en cours.

Dans la liste déroulante sélectionnez : "Page d'un message"

Voici la liste des modifications à faire sur cette page.

• Insertion du code javascript (remplacez http://site.fr/blog/tag_comment.js par le lien vers l'endroit où vous avez uploadé tag_comment.js) :

<script language="Javascript" src="http://site.fr/blog/tag_comment.js"></script>

Entre :

<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />

Et :

</head>

• Astuce de remplacement et formatage des commentaires :

<form>
  <textarea id="commentStr<$BlogCommentId$>" style="left: 0; top: 0; position: absolute; visibility: hidden;" rows=1><$BlogCommentBody$></textarea>
  <textarea id="commentQuoteStr<$BlogCommentId$>" style="left: 0; top: 0; position: absolute; visibility: hidden;" rows=1>[quote <$BlogCommentAuthor$>;<$BlogCommentId$>;- le <$BlogCommentDate$> à <$BlogCommentTime$>]</textarea>
</form>
<p>
  <script language=javascript>
  <!--
    var v_str = document.getElementById("commentStr<$BlogCommentId$>").value;
    formatComment(v_str);
  //-->
  </script>
</p>

A la place de :

<p><$BlogCommentBody$></p>

• Icône de citation de commentaires spécifiques de la note (remplacez http://site.fr/blog/btn_citer.gif par le gif correspondant au bouton de citation de commentaire, sinon, mettez _) :

<img class="comIconImg" alt="Citation" src="http://site.fr/blog/btn_citer.gif" onclick="insertQuote(<$BlogCommentId$>)" />

Juste avant :

</div>
</CBComments>

• Vérification du commentaire en amont :

<form action="" method="post" name="frmComment" id="frmComment" onsubmit="return checkCommentAndSubmit(this)">

A la place de :

<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">

• Insertion de la barre d'icônes au dessus de la zone de saisie du commentaire :

<script language=javascript>
<!--
  displayCommentIcons();
//-->
</script><br />

Entre :

<input id="commentTitle" name="commentTitle" value="" maxlength="128" />
</p>

Et :

<p>
<label for="commentBody">

• Zone d'affichage d'erreur dans la saisie du commentaire :

<strong><span id="comErrorMessage"></span></strong>

Entre :

<input  type="submit" name="submit" value="Envoyer" />

Et :

<br />
</form>

Maintenant dans la liste déroulante, sélectionnez "Feuille de style générale".

Ajoutez les styles commentQuoteHeader commentQuoteBody comIconImg (et comIconImg:hover pour faire un effet de rollover sur les boutons de la barre des icônes), après la définition du style ".blogbody .itemfooter".

.blogbody .commentQuoteHeader {
    color: #004000;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    margin-left: 10px;
    margin-right: 10px;
    border-style: none;
    border-width: 0px;
    text-decoration: none;
}

.blogbody .commentQuoteBody {
    color: #004000;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    background-color: #EFFFF5;
    margin-left: 10px;
    margin-right: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #990099;
    text-decoration: none;
}

.blogbody .comIconImg {
    border-style: solid;
    border-width: 1px;
    border-color: #FFDDFF;
}
.blogbody .comIconImg:hover {
    border-style: dotted;
    border-width: 1px;
    border-color: #990099;
    background-color: #EFFFF5;
}

Et changez les paramètres donnés en exemple ci-dessus avec votre propre configuration.

Cette section a pour but de donner une rapide description du fonctionnement des expressions régulières. Elles sont indispensables au fonctionnement de TagComment.

Les expressions régulières permettent donc de détecter dans les commentaires du lecteurs des symboles comme ":-)" ou ":(" ou "[quote]" et le remplacer par le texte ou code HTML correspondant.

Qu'est-ce qu'une expression régulière ?

Voici une définition de Wikipédia mais elle ne vous servira pas à grand chose.

• http://fr.wikipedia.org/wiki/Expression_rationnelle

Une expression régulière représente une syntaxe permettant de définir un ensemble de chaînes de caractères.

Typiquement, tout utilisateur de PC en trouve dans la description de fichiers.

Exemples :

Sous Windows, si vous cherchez un fichier dans un répertoire, vous taperez son nom : "monfichier.txt".

Si vous tapez "*.*", le moteur de recherche vous renverra tous les fichiers du répertoire (pas tous en fait, seul ceux qui ont une extension avec un ".").

Si vous tapez "*.txt", il vous renverra tous les fichiers finissant par ".txt".

Si vous tapez "mon*.txt", il vous renverra tous les fichiers finissant par ".txt" et commençant par "mon".

Moins connu, mais si vous tapez "m?sse.txt", il vous renverra des fichiers comme "masse.txt", "mosse.txt", "mrsse.txt", le 2^ème caractère pouvant être n'importe quoi.

Ce sont des expressions régulières où "*" signifie "n'importe quelle série de caractères" et "?" signifie "n'importe quel caractère unique".

Expressions régulières de Javascript

Les expressions régulières de Javascript fonctionnent de manière similaire mais autrement plus complexe que ce que j'ai décrit précédemment.

Par exemple, "." représente n'importe quel caractère (au lieu de "?"), et "*" s'applique au caractère précédant.

Par exemple "a*" désigne une série de zéro ou plusieurs caractères "a", comme "a" ou "aaa", ou "aaaaaaaa" ou une chaîne vide "".

"m+" désigne une série d'au moins un caractère "m".

Etc.

Voici de très bons liens que je vous conseille de potasser si vous voulez saisir toutes les possibilités des expressions régulières:

• http://erci.no-ip.com/origine/divers/javascript/topojs20.htm
• http://www.toutenligne.com/index.php?contenu=js_expression&menu=js
• Ou pour tester vos expressions régulières : http://erci.no-ip.com/origine/divers/javascript/topojse1.htm

Bataille d'anti-slash

Comme vous l'avez remarqué, des caractères spéciaux sont utilisés dans les expressions régulières de Javascript comme ".", "*", "(", ")" etc.

Que faire si nous cherchons une expressions régulière contenant une parenthèse ?

Il suffit de faire précéder la parenthèse du caractère d'échappement : l'anti-slash "\".

Donc, pour rechercher le smiley ":-)", l'expression régulière correspondante sera ":-\)".

Pareil, pour rechercher "[quote]", l'expression régulière correspondante sera "\[quote\]".

C'est pas fini. Nous travaillons en Javascript. Or les chaînes de caractère Javascript ont leurs propres caractères spéciaux.

Comme une chaîne de caractère Javascript est entourée par des guillemets ", le guillemet devient donc un caractère spécial.

On doit donc le précéder du caractère d'échappement anti-slash \ (encore) pour l'utiliser au sein d'une chaîne (sinon il y a conflit avec le guillemet de début et de fin de chaîne).

Donc, en Javascript le texte:

Il dit : "Ouaf".

... s'écrit :

"Il dit : \"Ouaf\"."

En Javascript, les caractères spéciaux à connaître sont donc :

• Le guillemet \"
• L'apostrophe \'
• Et l'anti-slash lui-même \\

DONC !...

Si je mixe expressions régulières avec Javascript ayant chacun leur caractères spéciaux et le même caractère d'échappement, je dois donc doubler chaque anti-slash.

Donc :

• Le smiley ":-\)" devient ":-\\)"
• Le quote "\[quote\]" devient "\\[quote\\]"

(Attention, le slash tout simple "/" n'est PAS un caractère spécial, il peut être utilisé tel quel)

Bon courage.

... et TagComment ?

Dans TagComment, les expressions régulières ne sont pas sensible à la casse. Donc, il n'y a pas de différence un caractère alphabétique écrit en minuscule ou en majuscule.

Par exemple, l'expression régulière "x-p" permet de reconnaître "x-p", "X-p", "x-P" ou "X-P".

Exemples

:a?sleep: permet de reconnaître :sleep: ou :asleep:

:shock(ed)?: permet de reconnaître :shock: ou :shocked:

\\[/b\\] permet de reconnaître [/b] et, par exemple, de le remplacer </strong>

(:\\))|(:-\\))|(:o\\))permet de reconnaître les smileys :) ou :-) ou :o) ainsi que :O) (si on dit que la casse ne compte pas dans TagComment)

On pourra la remplacer par la chaîne suivante (qui utilise le tag HTML <img>) :

• <img alt=\":)\" src=\"http://site.fr/smile.gif\" />

(:-\\\\)|(:o\\\\)|(:-/)|(:o/) permet de reconnaître :-\ ou :o\ ou :-/ ou :o/

La chaîne suivante permet de reconnaître le tag [quote] pouvant admettre deux paramètres optionnels :

• \\[quote(\\s+([^\\];]+)(;\\s*([0-9:]+)\\s*)?)?\\s*\\]

Il reconnaît donc [quote NOM ; ID], NOM pouvant être un nom contenant n'importe quel caractère sauf ] ou ;, et ID étant un caractère numérique.

Chaque expression parenthèsée se trouve dans les variables $1, $2, $3 et $4 qui seront utilisés dans la chaîne de remplacement (sachant que $1 englobe $2, $3 et $4, et que $3 englobe $4).

$2 représente donc NOM, et $4 sera ID.

L'expression régulière pourra donc être remplacée par :

• <div><a href=\"#c$4\">Citation : $2</a></div><div>