How to install a TinyMCE plugin under WordPress

The standard WYSIWYG editor that runs under WordPress is the TinyMCE editor, made by Moxiecode. While the default installation of TinyMCE in WordPress has a decent selection of features enabled – basic text manipulations, like italics and bold, blockquotes, alignment, etc. – you can actually enable a lot more via plugins.

For example, if you’re like me, you may want to be able to work with your post content in a full screen editor, without all of the extra stuff in the way – categories, post slug, comment settings, etc. There’s actually a plugin for TinyMCE that makes this possible. The problem that I ran into, however, is that Moxiecode’s explanation for installing plugins left something to be desired. After reading it, I was left scratching my head, going “Um, what?” So, after I was able to successfully get my full screen button working, I figured I’d share how to do it, in case someone else finds theirself in the predicament I was in: I knew what I wanted, I knew it was possible, I just didn’t know how to get it going. Well, now I know how to get it going, and soon enough, so will you:

1. The first thing you need to do is download the full TinyMCE package. The package comes with quite a few plugins that WordPress doesn’t automatically use.
2. Once you’ve downloaded it, unzip it to a folder you can find easily. I don’t know how many times I’ve “lost” files that I’ve unzipped because I accidentally unzipped them into Windows TEMP folder. Learn from my dumb mistakes. Make sure you know where you’re hurling files.
3. Head over to the folder you unzipped the TinyMCE package into. You’ll want to dig down into the folders, and ultimately, end up at: …tinymcejscriptstiny_mceplugins.
4. Look over the plugins available, and see what you want to install. Since I installed the fullscreen plugin, we’ll use that as the example.
5. Fire up your FTP program of choice (which should be FileZilla or WinSCP ). You need to again dig through some folders to get to where we need to upload the plugin. Starting at your root WordPress directory, go to: …wp-includes/js/tinymce/plugins/. Once you’re there, upload the fullscreen folder from the TinyMCE package. Make sure you upload the whole folder, not just the files in it.
6. Now that the plugin is uploaded, go up one folder on your server, to …wp-includes/js/tinymce/. In that folder, you should see a file called tiny_mce_config.php. Download it. (If you don’t see it, panic.)
7. Open up the file in your favorite text editor (I like Notepad++). Find the section which reads:
   $plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress');
For me, this bit of code was on line 28 of the file. Change this line to read:
   $plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'fullscreen');
8. Drop down a few lines (line 32 for me), to a bit of code which starts with
$mce_buttons = apply_filters. It’s a rather long line, so I’m not going to include it here in full. The important bit is this:
'redo', 'wp_adv_end'));
   Find this bit of code, and change it to:
'redo', 'wp_adv_end', 'fullscreen'));
9. Save the file, but don’t upload it yet. Before you do that, rename the tiny_mce_config.php file on your server to something else, like tiny_mce_config_backup.php. That way if you’ve made a typo (or if I’ve instructed you to do something dumb, which I hope I haven’t), you’ll have a way to quickly correct the errors that the WordPress admin panel will be yelling at you. Okay, did you rename your file? Excellent. Upload your newly edited tiny_mce_config.php file.
10. That’s it. Upon logging in to your WordPress admin panel and going to the Write Post screen, you should see a button on your editor toolbar that looks like this: Click it, and the editor box will expand to fill the whole browser window. Click it again to shrink things back down to normal.

A few further notes: if you log in and don’t see the full screen button, clear your cache. On one of my computers, I had to clear the cache to get the button to appear.

I ran into one bug with this plugin. I discovered that occasionally, if I switched to Code view, then back to WYSIWYG, and then tried to go full screen, things were all screwed up. The text editor window would go full screen, but the Upload area, along with all of the stuff in the Write Post sidebar, would be on top of the text area. The quickest way I found to fix this was to simply click Save and Continue Editing, then go full screen.

Lastly, as far as I can tell, the name of the folder that the plugin is in corresponds exactly to the text you need to add into the arrays in tiny_mce_config.php. So, if you were going to install the iespell plugin, instead of adding ‘fullscreen’ to the arrays, you’d add ‘iespell’. This is merely an assumption, though, based on looking at the plugins in the default TinyMCE package, and what I did to get one working. I’d say if you use third party plugins, this assumption might not work.

If you have any problems, questions, or corrections, drop a comment on this post. Either I’ll try to help, or, if it turns out I’ve no clue as to what the hell I’m doing, hopefully, someone who knows more will come along and help both me and you. However, at this point in time, I think I did this correctly, because my spiffy full screen button is working wonderfully.