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.
