Smilies in WordPress 3.3 with WP Grins Lite

The other day, I discovered a wee problem related to the recent upgrade to WordPress 3.3. The WP Grins Lite plugin I use to make it easy for me to insert smilies into my posts, like  :bouncy: and  :wales: didn’t want to play nicely. It was happy enough in the comments form, so the millions[1] of regular[2] readers weren’t affected. But the first time I tried to click one of the icons when editing a post, nothing happened. Mutter  :rant:

As the plugin hadn’t been updated for a while, and as my brain gets very confused when it comes to arcane things like the interaction between PHP and JavaScript, I went in search of other solutions, but couldn’t find one that would do what I needed.

So, I had to resort to brute force. I used the console in Chrome to see what happened when I clicked a smiley. It produced an error relating to a particular line in the plugin’s JavaScript file, which looked like this:

if ($j('#postdivrich') && typeof tinyMCE != 'undefined' \
      && (!$j('#edButtons') || $j('#quicktags')[0].style.display == 'none')) {
    tinyMCE.execCommand('mceInsertContent', false, ' ' + tag + ' ');
    tinyMCE.execCommand('mceRepaint');
    return;
    }

The error implied that the script couldn’t find the “style” of something called “undefined”, which suggested to me that the problem might be to do with recent changes to the TinyMCE rich text editor, which might not be returning the right values. Now I don’t pretend to entirely understand the code, but it looked to me like it was checking that I’m using the normal editor and not a replacement, and if I am, it proceeds to inserting the code for the smiley. I tried removing some of the conditions, but either I picked the wrong ones, or it was a more deep rooted problem.

So, purely for personal use, I removed the whole if thingy, making the code look like this:

tinyMCE.execCommand('mceInsertContent', false, ' ' + tag + ' ');
tinyMCE.execCommand('mceRepaint');

I saved an uploaded the changed file, and it worked :tigger: in both the WYSIWYG editor and the HTML version. It’s possible that this won’t work for other people, or might break if you’ve got different plugins installed, or the wind’s blowing from the wrong direction. Modified code may drink all your wine and kick the cat[3], use at your own risk.

[1] Possible exaggeration
[2] And the irregular ones too
[3] Even if you don’t have one :dizzy: