Writing a TinyMCE plugin in Wordpress

Writing a plug-in for Wordpress is fairly straightforward, and sort of documented.  Writing a plug-in for TinyMCE is a bit tougher, and there isn't much documentation.  Writing a plug-in for Wordpress, that generates a plug-in for TinyMCE is hardly documented and no easy task if you haven't done it before.  So after feeling my way through the process, I thought I would share some hopefully helpful advice.  While there are some examples out there (http://wiki.moxiecode.com/index.php/TinyMCE:Creating_Plugin) for developing plugin, they really aim at creating a plugin that doesn't modify or wrap a selection of text.  My requirements for creating a plug-in included the need to take the selected text and surround it with a div.  And Googling this does yield much. Enough talk, here are the details... my example includes a "popup" dialog box for collecting information on what needs to be inserted, or modified in content body.

Wordpress Plugin

Before we get to the TinyMCE stuff we first need to create a Wordpress plugin. My plugin will be called "tinymce-custom".  Like every Wordpress plug-in, we need to create a php file that defines things. This PHP should include a hook to get things initialized.  I'll also add a few functions to call from this hook to keep things nice and modularized.  Lastly you use the method "add_action()" which tells Wordpress to use this plug-in.  The code for this php is as follows...

In addition to the file I would recommend copying a file tinyMCE uses for displaying popups.  You will reference this code later.  This file can be found in your local tinyMCE installation at /wp-includes/js/tinymce/tiny_mce_popup.js.  Optionally you can just refer to this file at the current location and not duplicate the code, however this makes your plug-in a little less portable.

TinyMCE Plug-in Specific

Now we need to create the tinyMCE interaction.  Typically you should set your directory structure to be like the following.  (This seems to be the unwritten standard for doing this sort of thing).

• tinymce-custom
  • mce
    • highlight (or whatever you want to call this plug-in)

Then include in the highlight directory your code relating to the TinyMCE plug-in.  This should include any specific images you will be using.  We will need two code files in addition to these other assets. One must be named editor_plugin.js and the other can simply be an HTM file (this is what will be displaying as the popup). Here is the code for the javascript file.  I recommend looking at the TinyMCE codex site for other specifics relating to the contents of this file.

(function() {
tinymce.create('tinymce.plugins.HighlightPlugin', {
init : function(ed, url) {
// Register commands
ed.addCommand('mceHighlight', function() {
ed.windowManager.open({
file : url + '/highlight.htm',
width : 300 + parseInt(ed.getLang('highlight.delta_width', 0)),
height : 300 + parseInt(ed.getLang('highlight.delta_height', 0)),
inline : 1
}, {
plugin_url : url
});
});

// Register buttons
ed.addButton('highlight', {title : 'Highlight', cmd : 'mceHighlight', image: url + '/highlight.gif' });
},

getInfo : function() {
return {
longname : 'Highlight Section',
author : 'Michael Bopp',
authorurl : 'http://rapiddg.com',
infourl : 'http://rapiddg.com',
version : tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});

// Register plugin
tinymce.PluginManager.add('highlight', tinymce.plugins.HighlightPlugin);
})();

The associated HTM file as I mentioned will control the layout of the popup configuration.  I put the javascript code to make the resulting changes to the content in this file as well, though this could easily be moved to a separate file for cleanliness.

Using the Selected Text

This is where I had to do some research in order to make things work appropriately.  You could use get the currently selected text by passing the token {$selection} to your mceReplaceContent call.  And if you do not care about preserving the current html attributes of the selected text this is probably the best way to go.  However if you want to keep the formatting, like ULs, LIs and other tags you will need to use a slightly different approach.  To use the {$selection} token your javascript in the htm file would look like the following.  And you wouldn't need to create the local_ed property or assign it in the init method. Using the editor reference also give you more flexibility when it comes to what information you have available to use in your plug-in.

output += '">{$selection}';

Instead of using the $selection token I used the reference to the editor by passing it into my new htm page.  In order to preserve this reference to the editor I created a property.

output += '">'+HighlightDialog.local_ed.selection.getContent()+'';

var HighlightDialog = {
local_ed : 'ed',
init : function(ed) {
HighlightDialog.local_ed = ed;
tinyMCEPopup.resizeToInnerSize();
},

So I think this will get you started.  Let me know of any questions by posting a comment as I'm sure I forgot to mention some things. Hope this helps!