Smileys module provides an input filter converting text smileys into images. It allows creation or import of new smileys.

The smiley button dynamically gets the list of smileys and displays them in a dialog for users to choose. You should be using ajax preview in order to see the images in preview mode. jsE.prvAjax();

Button code (6.x-2.x or above):

php:
if (!
function_exists('_smileys_list')) return;
$L = drupal_to_js(_smileys_list());
$P = base_path();
drupal_add_js("(function($){
var click = function() {
  BUE.active.replaceSelection(this.firstChild.alt, 'end');
  return false;
};
var map = function(s) {
return $('<a href=\"#\" title=\"'+ Drupal.checkPlain(s.description) +'\"><img src=\"
$P'+ escape(s.image) +'\" alt=\" '+ Drupal.checkPlain(s.acronyms.split(' ')[0]) +' \" /></a>').css('margin', '0.5em').click(click)[0];
};
BUE.smlyWrap = function() {
  if (!BUE.\$smlyWrap) {
    var links = $.map(
$L, map);
    BUE.\$smlyWrap = $('<div style=\"width:200px\" class=\"bue-smiley-wrapper\"></div>').append(links);
  }
  return BUE.\$smlyWrap.clone(true);
};
})(jQuery);"
, 'inline');
return
'js: E.quickPop.open(BUE.smlyWrap());';

Button code(7.x) for Smiley module (Not smileys!):

php:
if (!
module_exists('smiley')) return;
$L = json_encode(db_query('SELECT uri, acronyms, description FROM {smiley} WHERE status=1')->fetchAll());
$P = base_path() . variable_get('smiley_path', drupal_get_path('module', 'smiley') . '/packs') . '/';
drupal_add_js("(function($){
var click = function() {
  BUE.active.replaceSelection(this.firstChild.alt, 'end');
  return false;
};
var map = function(s) {
return $('<a href=\"#\" title=\"'+ Drupal.checkPlain(s.description) +'\"><img src=\"
$P'+ escape(s.uri) +'\" alt=\" '+ Drupal.checkPlain(s.acronyms.split(' ')[0]) +' \" /></a>').css('margin', '0.5em').click(click)[0];
};
BUE.smlyWrap = function() {
  if (!BUE.\$smlyWrap) {
    var links = $.map(
$L, map);
    BUE.\$smlyWrap = $('<div style=\"width:200px\" class=\"bue-smiley-wrapper\"></div>').append(links);
  }
  return BUE.\$smlyWrap.clone(true);
};
})(jQuery);"
, 'inline');
return
'js: E.quickPop.open(BUE.smlyWrap());';

Custom CSS:

<style type="text/css">
.
bue-smiley-wrapper {
 
width: 182px !important;
}
.
bue-smiley-wrapper a {
 
display: inline-block;
 
margin: 2px !important;
 
padding: 0;
 
width: 30px;
 
height: 30px;
 
line-height: 30px;
 
text-align: center;
 
vertical-align: middle;
 
border: 1px solid #ccc;
 
background-color: #eee;
 
text-decoration: none;
}
.
bue-smiley-wrapper a:hover {
 
background-color: #fff;
}
.
bue-smiley-wrapper a:after {/*Make vertical align of images work*/
 
content: "|";
 
visibility: hidden;
 
letter-spacing: -1em;
}
.
bue-smiley-wrapper a img {
 
vertical-align: middle;
}
</
style>

thx for the code. and now is

thx for the code. and now is BUEditor the best editor for drupal. extrem fast and top. ;)

This doesn't works with

This doesn't works with newest version of Smileys for Drupal 6

I modified the button

I modified the button slightly to use the new "quick popup" in the latest version of BUEditor (1.4 for Drupal 6).

php:
$L = drupal_to_js(_smileys_list(0, " WHERE promote_to_box='1' ORDER BY weight"));
$P = base_path();
drupal_add_js("
var smlyList =
$L, smlyPath = '$P';
var smlyWrap = jQuery('<div style=\"width:200px\"></div>');
jQuery.each(smlyList, function(i, s) { jQuery('<a class=\"smiley\" href=\"#\" title=\"'+ s.description +'\"><img src=\"
$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').appendTo(smlyWrap)});
"
, 'inline');
return
'js:

editor.quickPop.open("Smileys");
$("tr.body>td", editor.quickPop.popup).empty().append(smlyWrap);
$("a.smiley", editor.quickPop.popup).click(function(){
  editor.quickPop.close();
  editor.active.replaceSelection(this.firstChild.alt, "end");
  return false;
});

'
; // end return 'js'.

Doesn't seem to work here

Doesn't seem to work here either.

errormessage was: "undefined smlyWrap"

Drupal 6.15
BUEditor 6.x-2.x-dev 2010-Jan-03

An updated button version for

An updated button version for 6.x-2.x has been added. Please check above.

Thanks for the quick reply!

Thanks for the quick reply! Unfortunately I still get an error:

"TypeError: BUE.smlyWrap is not a function"

That's probably something

That's probably something else breaking the script.

Oh.. d**n, it just hit me

Oh.. d**n, it just hit me that it must be the fact that I'm using popup comment forms using popups API... :(

Thanks for your help though! :)

I found another, less

I found another, less sophisticated solution. This one works for me (inside popup API modal forms):

js:
getSmile=function(txt) {
 
editor.active.replaceSelection(txt,'end');
 
editor.dialog.close();
}
var
userForm = '<table><tr>';
userForm += '<td><a href="javascript:getSmile(\':ANGEL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aa.gif" alt="ANGEL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':HAPPY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ab.gif" alt="HAPPY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SAD:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ac.gif" alt="SAD" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WINKING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ad.gif" alt="WINKING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TONGUE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ae.gif" alt="TONGUE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':COOL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/af.gif" alt="COOL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':LAUGHING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ag.gif" alt="LAUGHING" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':EMBARASSED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ah.gif" alt="EMBARASSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SHOCKED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ai.gif" alt="SHOCKED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISS:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aj.gif" alt="KISS" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRYING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ak.gif" alt="CRYING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SILENT:\');"><img src="/sites/all/modules/smileys/packs/kolobok/al.gif" alt="SILENT" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ANGRY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/am.gif" alt="ANGRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_UNDERSTAND:\');"><img src="/sites/all/modules/smileys/packs/kolobok/an.gif" alt="DONT_UNDERSTAND" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':PENSIVE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ao.gif" alt="PENSIVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':JOKINGLY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ap.gif" alt="JOKINGLY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DEVIL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aq.gif" alt="DEVIL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':HEADPHONES:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ar.gif" alt="HEADPHONES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/as.gif" alt="KISSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SICK:\');"><img src="/sites/all/modules/smileys/packs/kolobok/at.gif" alt="SICK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TIRED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/au.gif" alt="TIRED" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':STOP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/av.gif" alt="STOP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aw.gif" alt="KISSING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROSE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ax.gif" alt="ROSE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':THUMBS UP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ay.gif" alt="THUMBS UP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DRINK:\');"><img src="/sites/all/modules/smileys/packs/kolobok/az.gif" alt="DRINK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':IN LOVE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ba.gif" alt="IN LOVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BOMB:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bb.gif" alt="BOMB" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':HELP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bc.gif" alt="HELP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROCK ON:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bd.gif" alt="ROCK ON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CONFUSED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/be.gif" alt="CONFUSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':OK:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bf.gif" alt="OK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WASSUP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bg.gif" alt="WASSUP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SORRY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bh.gif" alt="SORRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BRAVO:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bi.gif" alt="BRAVO" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':ROFL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bj.gif" alt="ROFL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':PARDON:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bk.gif" alt="PARDON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':NO:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bl.gif" alt="NO" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRAZY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bm.gif" alt="CRAZY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_KNOW:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bn.gif" alt="DONT_KNOW" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DANCE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bo.gif" alt="DANCE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YAHOO:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bp.gif" alt="YAHOO" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':HI:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bq.gif" alt="HI" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BYE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/br.gif" alt="BYE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YES:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bs.gif" alt="YES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ACUTE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bt.gif" alt="ACUTE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WALL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bu.gif" alt="WALL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WRITE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bv.gif" alt="WRITE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SCRATCH:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bw.gif" alt="SCRATCH" /></a></td>';
userForm += '</tr></table>';
editor.dialog.open('Smileys', userForm);

Hi, I'm now working on a site

Hi, I'm now working on a site without popups and can confirm that the problem was indeed related to those popups.

However, the preview button gives the following error: ReferenceError: smlyList is not defined

"ReferenceError: Undefined

"ReferenceError: Undefined variable: smlyList"

I have basically no idea how to define it, I'm not such a good coder yet.

Could you provide instructions for "Also note that SMLY2HTML requires smlyList and smlyPath variables defined by smiley button"?

Thanks.

Wow, I must stop looking at

Wow, I must stop looking at code in the middle of the night..

http://drupal.org/node/689818
At least put a reference to that "issue."

I just tried out the smiley

I just tried out the smiley button, and it worked great! I appreciate your work on this. Thanks!

Although I configured the Smiley module to omit a lot of the "Roving" smileys, it appears that this Javascript button grabs all the images that are in the smileys/packs/Roving folder. I'd like to not show all of these. How should I go about this?

You can call _smileys_list()

You can call _smileys_list() with a second argument including query conditions.
For example _smileys_list(FALSE"promote_to_box = 1 AND package <> 'Roving'") will grab smileys that are displayed in smileys box and are not from the Roving package.

thanx! works great for me!

thanx! works great for me!

Help me please: Parse error:

Help me please:

Parse error: syntax error, unexpected '}' in /home/supolka/public_html/includes/common.inc(1695) : eval()'d code on line 12 :(

Suggest the line: $L =

Suggest the line:
$L = drupal_to_js(_smileys_list());

Is change to:
$L = drupal_to_js(_smileys_list(0,'ORDER BY weight'));

To respect the weighting.

Has anyone got this working

Has anyone got this working with Drupal 7? If so, how?

Thank you!

Added button code for Smiley

Added button code for Smiley 7.x. which is a fork of Smileys module.

Thank you for adding the code

Thank you for adding the code for the D7 Smiley plugin.

You may want to add this the css show above:

  outline0;

I had troubles with dotted lines showing up due to the focus selector being set around the smiley images. Adding this fixed it. I'm sure it depends on your theme but it makes sense that most people won't want to see that focus is set on the smileys.

That's for accessibility,

That's for accessibility, allowing navigation by keyboard.

i get "The editor code did

i get "The editor code did not produce proper editor data." when i try to import the code.
drupal 7.15
bueditor 7.x-1.4
smiley beta2

I'm also getting this

I'm also getting this error.
drupal 7.16
bueditor 7.x-1.4
bueditor_plus 7.x-1.1
smiley 7.x-1.0-beta2

I also have this problem. How

I also have this problem. How to fix that?

Under supervision of Drupal :)