Unknown
Jul 31, 2017
  2382
(0 votes)

Using Adobe Typekit in EpiServer

Typekit provides embed code to load fonts

https://typekit.com/

The problem is that you want those same fonts to be present in the TinyMCE editor.

I decided to use a TinyMCE plugin to load the TypeKit.

https://world.episerver.com/documentation/developer-guides/CMS/editing/Customizing-the-TinyMCE-editor/ - Adding a TinyMCE plug-in

I chose the option of creating a Util folder as per

https://world.episerver.com/globalassets/sdkdocuments/developers-guide1/episerver-cms/75/editing/tinymce_add_javascript.png

I only needed editor_plugin.js under a folder that I named typekitplugin

I created a class decorated with the TinyMCEPluginNonVisual attribute

[TinyMCEPluginNonVisual(LanguagePath = "/admin/tinymce/plugins/typekitplugin", PlugInName = "typekitplugin")]
public class TinyMCETypeKitPlugin
{
}

Once that is done you need to activate it in the editor settings

I.e. Admin - Config - Edit Custom Property Types - XhtmlString > 255 - Plugins without a button

You will find that it is missing a langauge entry which you can fix by adding TinyMCE.xml under Resources/LanguageFiles

=========================================

TinyMCE.xml

========================================

<?xml version="1.0" encoding="utf-8" ?>
<languages>
<language name="English" id="en">
<tinymce>
<typekitplugin>
<typekitplugin_desc>
Typekit Plugin
</typekitplugin_desc>
</typekitplugin>
</tinymce>
</language>
</languages>

=========================================

editor_plugin.js 

You will need to change "xxxxxxx" to the ID of the TypeKit

Change the GetInfo function as appropriate

========================================

(function () {

tinymce.create('tinymce.plugins.typekitplugin', {
/**
* Initializes the plugin, this will be executed after the plugin has been created.
* This call is done before the editor instance has finished it's initialization so use the onInit event
* of the editor instance to intercept that event.
*
* @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
* @param {string} url Absolute URL to where the plugin is located.
*/
init: function (ed, url) {
ed.onPreInit.add(function (ed) {

// Get the DOM document object for the IFRAME
var doc = ed.getDoc();

// Create the script we will add to the header asynchronously
var jscript = "(function() {\n\
var config = {\n\
kitId: 'xxxxxxx'\n\
};\n\
var d = false;\n\
var tk = document.createElement('script');\n\
tk.src = '//use.typekit.net/' + config.kitId + '.js';\n\
tk.type = 'text/javascript';\n\
tk.async = 'true';\n\
tk.onload = tk.onreadystatechange = function() {\n\
var rs = this.readyState;\n\
if (d || rs && rs != 'complete' && rs != 'loaded') return;\n\
d = true;\n\
try { Typekit.load(config); } catch (e) {}\n\
};\n\
var s = document.getElementsByTagName('script')[0];\n\
s.parentNode.insertBefore(tk, s);\n\
})();";

// Create a script element and insert the TypeKit code into it
var script = doc.createElement("script");
script.type = "text/javascript";
script.appendChild(doc.createTextNode(jscript));

// Add the script to the header
doc.getElementsByTagName('head')[0].appendChild(script);
});
},

/**
* Returns information about the plugin as a name/value array.
* The current keys are longname, author, authorurl, infourl and version.
*
* @return {Object} Name/value array containing information about the plugin.
*/
getInfo: function () {
return {
longname: 'TypeKit plugin for HaurikiPHO',
author: 'Guru Digital',
authorurl: 'http://gurudigital.nz',
infourl: 'http://gurudigital.nz',
version: "1.0"
};
}
});

// Register plugin
tinymce.PluginManager.add('typekitplugin', tinymce.plugins.typekitplugin);
})();

Jul 31, 2017

Comments

Paul McGann (Netcel)
Paul McGann (Netcel) Jul 31, 2017 09:42 AM

Nice work Russel, will be definitely using this more often.

Please login to comment.
Latest blogs
Boosting Graph Query Performance with Stored Templates

Stored Templates offer a solution by pre-generating and storing translated queries. This bypasses the time-consuming translation process, leading t...

Jonas Bergqvist | Feb 27, 2025

Exploring Optimizely SaaS CMS – What’s New & How to Accelerate your Build

In my latest video, I take a fresh look at Optimizely SaaS CMS , covering some of the recent improvements aimed at enhancing the editor experience....

Minesh Shah (Netcel) | Feb 27, 2025

Adaptive Images with Optimizely CMP

Images from Optimizely CMP can now be seamlessly integrated into Optimizely CMS through Adaptive Images, with the all same features that web editor...

Ted | Feb 27, 2025 |

Using the 1996 text-based Browser 'Links' to optimize website accessibility

Use a text-based browser from the late 1990s to improve the accessibility of your modern Optimizely website!

Tomas Hensrud Gulla | Feb 25, 2025 |

Using the 1996 text-based Browser 'Links' to optimize website accessibility

Use a text-based browser from the late 1990s to improve the accessibility of your modern Optimizely website!

Tomas Hensrud Gulla | Feb 25, 2025 |

Convert media type in a migrationstep

I needed to convert the type for some media files. Suddenly webp files were sent to the CMS from an external system and webp was not added to the...

Jeroen Stemerdink | Feb 24, 2025 |