How to add a mailto button to TinyMCE

3 comments

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:foo@bar.com?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.

   Log in to Reply

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

   Log in to Reply

3. First of all, make sure you have tinyMce Advanced plugin installed. Then, you can just use the insert / edit link button from the tinyMce editor. You don’t need a different button. In the destination URL add this

   mailto:my-mail@my-domain.com
   

   Log in to Reply