How to add a mailto button to TinyMCE

Question

I need to add a mailto button to TinyMCE in WordPress. Has anybody already done this? Or any tops on how to go about it?

Answer 1

Given you are wanting to put this into WordPress I assume you want to simply insert a href="mailto:" type tag into your document for the currently selected text.

The simplest way is to create a basic plugin. You can do this in the same page that tinyMCE is initialised into. The example below will wrap the currently selected text with a static mailto.

 tinymce.create('tinymce.plugins.MailToPlugin', {

  init : function(ed, url) {
   ed.addCommand('mceMailTo', function() {
    var linkText = ed.selection.getContent({format : 'text'});
    var newText = "<a href='mailto:[email protected]?subject=testing'>" + linkText + "</a>"
    ed.execCommand('mceInsertContent', false, newText);
   });

   // Register example button
   ed.addButton('mailto', {
    title : 'MailTo',
    cmd : 'mceMailTo',
    image : url + '/images/mailto.gif'
   });
  }
 });

 // Register plugin with a short name
 tinymce.PluginManager.add('mailto', tinymce.plugins.MailToPlugin);

You will of course need to create an image (mailto.gif) for the toolbar button.

You then simply add the following to your plugin list

plugins: '-mailto'

and put mailto on the toolbar.

Of course, if you want to allow the end user to specify the email address and subject, then you will need a dialog. There is a good example of how to create a plugin on the TinyMCE site in Creating a Plugin

Unfortunately I can't comment on how you would do either of these in WordPress but I suspect you will need to customise your version of WordPress tinyMCE plugin.

Answer 2

You can use the class I built in WordPress my tutorial and then make the calls to your javascript files through instantiating the class. At least, regarding the reference to adding it to your plugins.

Cheers