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.