Home Hack of the Day: Upgrading the TinyMCE Emotion Plugin With PHP

Hack of the Day: Upgrading the TinyMCE Emotion Plugin With PHP

TinyMCE is an extremely powerful WYSIWYG editor that is easy to set up. It comes with a good selection of plugins, which were designed to work without the need for server-side scripts, such as PHP.

One plugin I quite like is the Emotion plugin (yes – it’s Emotion rather than Emoticon – I’m trying not to type it the wrong way). However, it’s a bit of a pain to add new images. It can be done, but if you use PHP, there’s a much, much easier way…

A Quick Introduction To TinyMCE Plugins

This post does not get into the finer details of how to set up a brand new plugin for TinyMCE, but there are a few things you’ll need to know before you start.

Plugins are stored in tiny_mce/plugins. The emotion plugin can be found under tiny_mce/plugins/emotions.

Most plugins have three main files. Firstly, a simple HTML file that is used to display the popup window. Secondly, a JavaScript source file. Third, a minimised version of the JavaScript source file.

To edit a plugin, you’ll need to change the *_src.js file, then compress it and copy the output into the *.js file. You can use JavaScript Compressor to compress the source.

Removing the Language Calls

Edit emotions/js/emotions.js and change the following code:

alt : ed.getLang(title),
title : ed.getLang(title),

To this

alt : title,
title : title,

Creating the PHP File

Copy emotions.htm and rename the new file to be called emotions.php. Edit the file and delete everything between the <body> tags. Now paste the following code instead:

I’m sure you can find a few ways to tidy up the code. This is really just a starting point to demonstrate the functionality.

Linking to the PHP File

Edit emotions/editor_plugin_src.js. Look for the reference to /emotions.html and change it to /emotions.php. You may also want to change the width and height. I increased the width from 250 to 500, and the height from 160 to 350.

Save the file, compress it, and copy the compressed contents into editor_plugin.js.

Get Ready

Upload the files to your dev site, if you’re not trying this on your local web server.

Add some new smilies to the emotions/img folder.

Do a hard refresh to ensure the old plugin isn’t cached.

Here’s How It Looks

Screenshot of the plugin in action:

What Else?

Now that the plugin uses PHP to pull in the files, you could extend this plugin to pull in filenames and descriptions from a database table. Uploading a file to the directory via a web interface would also add the file to the appropriate database table. This would mean you wouldn’t list all the files in the directory (and possibly non-graphical files), only the ones that are uploaded via the web interface. But you could just filter out all files except JPG, PNG and GIF.

How else could this plugin be extended? Let us know if you’ve tweaked any other TinyMCE plugins.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.