J'ai mis en place la gestion des smileys sur le module pour mon usage perso et
voici comment j'ai procédé:

script ajax:

$(document).ready(function(){

// on crée un array contenant le nom du smiley et les tags qui lui sont associés

var emotes = {
   "smile": Array(":-)",":)"),
   "sad": Array(":-(",":("),
   "bored": Array(":-|",":|"),
   "wink": Array(";-)",";)"),
   "confused": Array("P-|","P|"),
   "amazed": Array(":-O",":O"),
   "laugh": Array(":-D",":-D"),
   "grin": Array("8-D","8D"),
   "shy": Array(":-S",":S"),
   "cool": Array("(C)"),
   "crying": Array(":,-(",":,("),
   "kiss": Array("(K)"),
   "frozen": Array("(F)"),
   "sick": Array("(S)"),
   "beaten": Array("(B)"),
   "angry": Array(":-[",":["),
   "angel": Array("(A)"),
   "devil": Array("(6)")
};

// sur chaque click on vérifie si le click est fait sur la shoutbox ou ailleurs

   $("html").click(function(event){
       var $target = $(event.target);
if ($target.parents('#shoutbox').length == 0){    // si il n'est pas fait
dans la shoutbox
if($("#shoutbox_smileys").css("display") == "block"){   // si la
fenêtre des smileys est ouverte
$("#shoutbox_smileys").stop(true,true).hide("slide", {direction:
"right"}, 200);   // on la ferme
         }
      }
      else{   //sinon...
if($("#shoutbox_smileys").css("display") == "none"  &&
$("#shootboxNickname").length == 1){    // si la fenetre des smileys est fermée
et que le nickname est renseigné
$("#shoutbox_smileys").stop(true,true).show("slide", {direction:
"right"}, 200);    // on ouvre la fenêtre des smileys
         }
      }
   });

   $("#shoutbox_smileys img").each(function(){ 
      $(this).click(function(){
var bbcode = emotes[$(this).attr("alt")][0];    // pour chaque smiley
cliqué on attribut le tag correspondant
var input = $("#Shootboxinput").val() + bbcode;   // on récupère la
velur de l'input auquel on ajoute le tag du smiley
         $("#Shootboxinput").focus();   // on rend le focus à l'input
$("#Shootboxinput").val(input);    // on réinjecte la valeur de l'input
additionné du tag du smiley
      });
   });

});

function smileys(data){

         for(var emoticon in emotes){
for(var i = 0; i < emotes[emoticon].length; i++){    // pour chaque
tag qui se trouve dans l'arrayemotes
var str = '<img
src="uploads/images/smileys/face-'+emoticon+'.png" class="emoticonimg"
alt="'+emoticon+'" height="16px"/>';  // on défini l'image correspondant au tag
évalué
data =
data.replace(RegExp(emotes[emoticon][i].replace(/[-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
"\\$&"),"gi"),str);   // on remplace chaque tag par l'image correspondante en
échappant chaque métacaractère de chaque tag pour que la fonction replace les
prenne bien en compte
            }
        }
       $("#shoutbox_contenu").html(data);   // on affiche le contenu modifié
}  

il faut aussi donc remplacer dans la fonction pingContent()

$("#shoutbox_contenu").html(data);

par

smiley(data)

pour qu'il change tous les tags par les images correspondantes.

j'ai donc ensuite créer un dossier smileys dans images contenant tous les
smileys et nommés de la forme face-"+emoticon+".png

pour les afficher dynamiquement au click sur la shoutbox j'ai rajouté dans le
template une fenêtre qui s'ouvre contenant les smileys cliquables.

template + css:

<div id="shoutbox">
    <div id="shoutbox_title">SHOUUuuut BOX !!!</div>
<div id="shoutbox_smileys"><div id="shoutbox_smileys_contour"></div><div
id="smileys">{global_content name='smileys'}</div></div>
    <div id="shoutbox_contenu">
<img src='{$url_wait}' alt='please wait few seconds'  height='16px'
width='16px'/>
    </div>
<form action="#" method="post" id="shootboxform"
onsubmit="ShootboxFormSubmit();return false;">
    <div id="shootboxDiv">
            <img src='{$url_wait}' alt='please wait few seconds'/>
    </div>
    </form>
</div>

<style type="text/css">
#shoutbox{
   position:relative;
   width:212px;
   height:310px;
   padding:5px;
   margin:10px 0 30px;
   background:#334577;
   border-radius:8px;
}

#shoutbox_smileys{
   position:absolute;
   left:-120px;
   margin-top:5px;
   padding:5px;
   width:100px;
   height:220px;
   color:#fff;
   background:#334577;
   border-radius:5px;
   z-index:1000;
   display:none;
}

#shoutbox_smileys #smileys{
   position:absolute;
   width:100px;
   height:220px;
   background:#fff;
   z-index:1000;
}

#shoutbox_smileys img{
   margin:5px 6px 4px 5px;
   cursor:pointer;
}


#shoutbox_smileys_contour{
   position:absolute;
   left:-10px;
   top:-10px;
   padding:5px;
   width:120px;
   height:240px;
   color:#fff;
   background:#334577;
   border-radius:8px;
   opacity:0.5;
   z-index:999;
}

</style>

Les dimensions données dans le css sont à adapté en fonction des besoins
personnels...

Ensuite, pour me simplifier la vie j'ai mis mes smileys dans un bloc de contenu
global {global_content name='smileys'} qu'on retrouve dans le template.

BCG:

<img title=":-)" src="uploads/images/smileys/face-smile.png" alt="smile"
width="20" height="20" />
<img title=":-(" src="uploads/images/smileys/face-sad.png" alt="sad" width="20"
height="20" />
<img title="|-(" src="uploads/images/smileys/face-bored.png" alt="bored"
width="20" height="20" />
<br />
<img title=";-)" src="uploads/images/smileys/face-wink.png" alt="wink"
width="20" height="20" />
<img title="°-|" src="uploads/images/smileys/face-confused.png" alt="confused"
width="20" height="20" />
<img title=":O" src="uploads/images/smileys/face-amazed.png" alt="amazed"
width="20" height="20" />
<br />
<img title=":-))" src="uploads/images/smileys/face-laugh.png" alt="laugh"
width="20" height="20" />
<img title=":D" src="uploads/images/smileys/face-grin.png" alt="grin" width="20"
height="20" />
<img title=":-." src="uploads/images/smileys/face-shy.png" alt="shy" width="20"
height="20" />
<br />
<img title="(C)" src="uploads/images/smileys/face-cool.png" alt="cool"
width="20" height="20" />
<img title=":'(" src="uploads/images/smileys/face-crying.png" alt="crying"
width="20" height="20" />
<img title="(K)" src="uploads/images/smileys/face-kiss.png" alt="kiss"
width="20" height="20" />
<br />
<img title="frozen" src="uploads/images/smileys/face-frozen.png" alt="frozen"
width="20" height="20" />
<img title="sick" src="uploads/images/smileys/face-sick.png" alt="sick"
width="20" height="20" />
<img title="beaten" src="uploads/images/smileys/face-beaten.png" alt="beaten"
width="20" height="20" />
<br />
<img title="angry" src="uploads/images/smileys/face-angry.png" alt="angry"
width="20" height="20" />
<img title="angel" src="uploads/images/smileys/face-angel.png" alt="angel"
width="20" height="20" />
<img title="devil" src="uploads/images/smileys/face-devil.png" alt="devil"
width="20" height="20" />


voilà, et ça fonctionne...