Adding Smileys

Jul 9, 2014 at 7:06 AM
Edited Jul 9, 2014 at 7:11 AM
Hey all,

Had a need to add a set of smileys to jHtmlArea for a project... and found a few requests on StackOverflow for this functionality too.

Anyways.... here's a quick solution I whipped up, in case anyone wants to do something similar (or improve the code!) Note that below I'm using a restricted toolbar also, which you might need to amend (This is simply a cut/paste)

Requirements: JqueryUI, and a collection of Smileys placed in an "images/smiles" folder. Then amend the Array "urls" with the names of your Smiley filenames
$('textarea').htmlarea({ 
      css:'css/jHtmlArea_custom.css', 
      toolbar: ["bold", "italic", "underline","strikethrough","|","link", "unlink","image",
                  {css:'smileys',
                   text:'Our Smileys',
                   action:function(btn) { 
                         var masterbox=this;
                         var smilebox=''; 
                         var urls=new Array('angry.gif','banginghead.gif','boo.gif','clap.gif','cool.gif','dance.gif','doh.gif','drunk.gif','dunce.gif','evil.gif','fume.gif','grin.gif','grr.gif','hug.gif','huh.gif','notme.gif','laugh.gif','noob.gif','no.gif','tongue.gif','praise.gif','worry.gif','rant.gif','rolleyes.gif','cry.gif','shock.gif','sick.gif','smile.gif','smug.gif','sorry.gif','think.gif','unsure.gif','whip.gif','wink.gif','what.gif','yes.gif'); 
                          $.each(urls,function(k,v) { smilebox=smilebox+'<img class="smile" src="/images/smiles/' + v + '">'; }); 
                          var spawnme=$(document.createElement('div')); 
                          spawnme.html('<p>' + smilebox + '</p>');
                          spawnme.dialog({ 
                                 create: function(){ $(this).on('click', 'img.smile',function(){ masterbox.image($(this).attr('src')); }); },
                                 title: 'Smileys', 
                                 modal: true, 
                                 close: function(event,ui) { $(this).remove();}
                           });
                   } }] 
});
Hope this is helpful for someone
EDIT I note that in the code above, the 'plus signs' have been replaced with + ... so just manually substitue a plus sign in place! There's 5 occurrences to be replaced