emoticons in forum

[Daniele.Elle]

Ciao,
Pure io ultimamente mi sono trovato ad affrontare un problema analogo. Ti espongo la mia soluzione.

Ho utilizzato una textbox lato mittente con id e un div esteticamente equivalente lato destinatario con id ctl00_ContentHomePage_DivViewTextPM; successivamente mi sono scritto il seguente script:

//smileys.js

//Lista dei nomi delle smileys
 listSmileName=new Array(  
    "ahah1","confirm","zzz","confuse1","confuse2","cool","cry4","cry1","cry2",     
    "cry3","devil","fun","gun1","hands","kiss1","kiss2","lol1","lol2","lol3","love2",
    "nono","ooh","happy1","happy2","yes");
      
//Come vedi ho messo le gif nella cartella ../Messages/smile/ e il nome delle smile coincide 
//con il nome delle gif
      function listImage(){      
            listSmile =new Array();
             for(var i = 0; i<listSmileName.length;i++)
                 listSmile[i] ="[img]../Messages/smile/"+listSmileName[i]+".gif[/img] ";
            return listSmile;
    }

      //sostituisco il codice delle smileys "(nomesmile)" con img associata 
      function Addsmile(){
    if((document.getElementById("ctl00_ContentHomePage_DivViewTextPM"))== null)return;
       divEl = document.getElementById("ctl00_ContentHomePage_DivViewTextPM").innerHTML;
        repl = divEl;
      var listimg = listImage(); 
      for(var i = 0; i<listSmileName.length;i++){
      var tmp = "\\("+listSmileName[i]+"\\)";
      //espressione regolare globale
         reg = new RegExp(tmp,"g")
      repl = repl.replace(reg, listimg[i]);

      
        }
    //visto che non volevo permette che il mittente potesse inserire codice html ho utilizzato un 
   //codice "(breakbrspace)",da me definito, per creare i break; 
   //tu lo puoi fare in manira più semplice lato server
         reg = new RegExp("\\(breakbrspace\\)","g")
      repl = repl.replace(reg, "
");

      document.getElementById("ctl00_ContentHomePage_DivViewTextPM").innerHTML = repl;
      }
      
//creo la lista per la selezione delle smileys nel div con id SmileysContent
     function addListSmile(){
           var listSmileTable = document.getElementById("SmileysContent");
         var result = "<table style='border:solid 1px;background-color:white'>";
         idx = 0;
         var ListImg = listImage();
        //creo una tabella 5x5
              for(var  i = 0;i<5;i++){
                result += "<tr>";
               for(var  j = 0;j<5;j++){            
                 result += "<th onclick=\"thClick('"+listSmileName[idx]+"');\" style='border:Solid 1px black;'>";
                               result +=   ListImg[idx];                  
                      result += "</th>";                    
                      idx++;
      }
              result += "</th>";
     }
     result += "</table>";
     listSmileTable.innerHTML = result;
     };
     
//aggiungo il codice della smile nella text con id ctl00_ContentHomePage_TextBoxTextMess"
     function thClick(id){
      var text = document.getElementById("ctl00_ContentHomePage_TextBoxTextMess");
       text.value+="("+id+")";
//ho utilizzzato jquery per nascondere il div di selezione smileys dopo la selezione
         $("div#SmileysContent").hide("fast");
// logicamente nel corpo della pagina ho anche il duale .show("fast");
     }; 

Ovviamente il messaggio contenente i codici delle smileys và salvato nel db