How do you give content editors better support for creating telephone link in Episerver. The build in link editor in TinyMCE gives many supports for web links and emails both to internal and external pages. It does however not support creating telephone links.

Telephone links are created as normal links but you prefix the phone number with tel: when inserting it in the href attribute of an a-tag.

<a href="tel:555-223-222">Call me</a>

 

There are many ways you can go with this.

  • Create a block or use a string property that can render out your telephone link based on input in your string property.
  • Extend the TinyMCE with a custom plugin that can give you this support.

To give best flexibility for the editor we will have a look at how you could include this in the TinyMCE editor. 

tellink.png

Implementation

Add your plugin to your solution. This needs to be located in a structure so TinyMCE can understand it. 

/ClientResources/Scripts/tinymce/plugins/example/plugin.js
/ClientResources/Scripts/tinymce/plugins/example/plugin.min.js

Next step is to configure the initialization of TinyMCE to load up the plugin in the toolbar so we are able to activate it.

You do this by configuring it in an initialization module that implements IConfigurableModule and is dependant on TinyMceInitialztion to have been executed. Add reference to the external plugin with the AddExternalPlugin method. After that Add it to the toolbar so it is visible to the editor.

I have also added the view code plugin so we can see the mark-up created by the plugin which makes it easier to debug it. 

using EPiServer.Cms.TinyMce.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;

namespace TinyMCETelLinkPlugin.Business.Initialization
{
	[ModuleDependency(typeof(TinyMceInitialization))]
	public class ExtendedTinyMceInitialization : IConfigurableModule
	{
		public void Initialize(InitializationEngine context)
		{
		}

		public void Uninitialize(InitializationEngine context)
		{
		}

		public void ConfigureContainer(ServiceConfigurationContext context)
		{
			context.Services.Configure<TinyMceConfiguration>(config =>
			{
				config.Default()
					.AddPlugin("code")
					.AddExternalPlugin("tellink", "/ClientResources/Scripts/tinymce/plugins/tellink/myplugin.js")
					.Toolbar(DefaultValues.Toolbar + " | code tellink");
			});
		}
	}
}

Now to the coding of the actual plugin. For that we will create the js script file at the location defined in the initialization.

The script consists of different elements.

  • Adding the plugin to the plugin manager. 
  • The button configuration including how it looks and what script command is assigned to it. 
  • The command of the behaviour of the button.

Here it is important that you use the same naming as was used in the cs initialization module. Otherwise it may not load. So adding the button configuration and adding the plugin the plugin manager all are done with the name "tellink". 

The command consists of different element. First detect if we have selected an existing tellink that we are editing. If we are, then save them in local variables for the window we will use for editing input.

Second part is to open the editor for collecting input where we collect the phone number and the link text. Based on this render out the <a> with its href attribute configured with the input.

! function () {
    "use strict";

tinymce.PluginManager.add('tellink', function (editor, url) {
    
    editor.addCommand('tinymcecustombutton', function () {
   
        var href = "";
        var text = "";
        
        //On open
        if (editor.selection.getNode().tagName === "A"
            && editor.selection.getNode().className.includes("tellink")) {
            href = editor.selection.getNode().getAttribute("href").replace("tel:","");
            text = editor.selection.getNode().innerText;
        }

        // Open window
        editor.windowManager.open({
            title: 'Tel Link',
            body: [
                { type: 'textbox', name: 'href', label: 'Phone Number', value: href },
                { type: 'textbox', name: 'text', label: 'Link text', value: text },
            ],
            onSubmit: function(api) {
                var data = api.data;

                if (data.href === '') {
                    return;
                }

                if (data.text === '') {
                    editor.insertContent('<a class="tellink" href="tel:' + data.href + '">' + data.href + '</a>');
                    return;
                }

                editor.insertContent('<a class="tellink" href="tel:' + data.href + '">' + data.text + '</a>');
                
            }
        });
    });

    
    // Add a button that opens a window
    editor.addButton('tellink', {
        title: 'Tel Link',
        image: url + '/images/tel.png',
        cmd: 'tinymcecustombutton'
    });
    

    return {
        getMetadata: function () {
            return {
                name: "Tellink plugin",
                url: "http://andersjacobsen.net"
            };
        }
    };
});
}();

That's it and you have a custom plugin that makes it easy to create telephone links using the TinyMCE editor. 

This could be improved further with input validation of the phone number, but I will leave that part up to others.

 

Full source code

https://github.com/andersjacobsen/episerver-tinymce-tellinkplugin

Resources

Here are some usefull resources that I have used in understanding how to create a custom plugin for the TinyMCE editor.