Jack Barber / Website Design

Email Address Plugin for Redactor

Email Address Plugin for Redactor

Redactor is a fantastic text editor. It's bundled in with Perch and Perch Runway, which is why I've come to use it so frequently.

It offers a simple but really user friendly and intuitive user interface and experience and there are a number of excellent plugins which mean you can extend its functionality.

I'm currently working on a large website for a client of mine. We're building the site using Perch Runway and my client is busy transferring hundreds of pages of content from their existing site to the new site. Most of this is done through Redactor.

Redactor makes it really easy to add links to other sites, but my client wondered about being able to easily add email hyperlinks including a subject. In vanilla HTML this is achieved like this:

<a href="mailto:user@example.com?subject=Email Subject">user@example.com</a>

In order to achieve this my client and her team would need to learn how to read HTML and enter the links in right place - not an ideal solution.

Rather than do that, I built a bespoke Redactor plugin which allows them to simple click a button on the editor toolbar and enter the email address and subject into a form in a modal window.

Here's the code:

(function($R)
{
   $R.add('plugin', 'email', {
        modals: {
            // this is variable with modal HTML body
            'emailmodal': '<form action=""><div class="form-item"><label>Email Address</label><input type="text" name="emailaddress"><label>Email Subject</label><input type="text" name="emailsubject"></div></form>'
        },
        // set translations
        translations: {
            en: {
                "email": "Email"
            },
        },
        init: function(app)
        {
            this.app = app;
            this.toolbar = app.toolbar;
            this.insertion = app.insertion;

            // define lang service
            this.lang = app.lang;
        },
        // messages
        onmodal: {
            emailmodal: {
               insert: function($modal, $form)
               {
                  var data = $form.getData();
                  this._insert(data);
               }
            }
        },
        start: function()
        {
            // set up the button with lang variable
            var buttonData = {
                title: this.lang.get('email'),
                api: 'plugin.email.open'
            };

            // add the button to the toolbar
            var $button = this.toolbar.addButton('email', buttonData);
        },
        open: function()
        {
            var options = {
                title: 'Insert Email Address', // the modal title
                name: 'emailmodal', // the modal variable in modals object
                commands: {
                    cancel: { title: 'Cancel' }, // the cancel button in the modal
                    insert: { title: 'Insert' }, // the insert button in the modal
                }
            };

            // open the modal with API
            this.app.api('module.modal.build', options);
        },
        // private
        _insert: function(data)
        {
            this.app.api('module.modal.close');

            if (data.emailaddress.trim() === '') return;
            var emaillink = '<a href="mailto:'+data.emailaddress+'?subject='+data.emailsubject+'">'+data.emailaddress+'</a>';
            this.insertion.insertHtml(emaillink);
        }
    });
})(Redactor);

To use this you can simply save the code as email.js and then include it within your Redactor setup - follow their instructions for adding plugins.