Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Typekit fonts for TinyMCE editor plugin
add_filter("mce_external_plugins", "tomjn_mce_external_plugins");
function tomjn_mce_external_plugins($plugin_array){
$plugin_array['typekit'] = get_template_directory_uri().'/typekit.tinymce.js';
return $plugin_array;
}
(function() {
tinymce.create('tinymce.plugins.typekit', {
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);
});
},
getInfo: function() {
return {
longname: 'TypeKit For TinyMCE',
author: 'Tom J Nowell',
authorurl: 'http://tomjn.com/',
infourl: 'http://twitter.com/tarendai',
version: "1.1"
};
}
});
tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();
@Zae
Copy link

Zae commented Sep 18, 2012

I am getting an error on line 32 in IE8.

The error is: Unexpected call of method or acces to property, line 32, character 5.

Apparantly IE8 can't appendChild on a script and you have to use .text instead: http://webbugtrack.blogspot.nl/2007/10/bug-142-appendchild-doesnt-work-on.html

I applied a working fix on my fork here: https://gist.github.com/3742398 (tested on IE8, firefox and chrome)

@knicpfost
Copy link

knicpfost commented Apr 3, 2014

new javascript code because updated Typekit!

(function() {
    tinymce.create('tinymce.plugins.typekit', {
        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(d) {\n\
                    var config = {\n\
                    kitId: 'xxxxxx',\n\
                    scriptTimeout: 3000\n\
                    },\n\
                    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,'')+' wf-inactive';},config.scriptTimeout),tk=d.createElement('script'),f=false,s=d.getElementsByTagName('script')[0],a;h.className+=' wf-loading';tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!='complete'&&a!='loaded')return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)\n\
})(document);\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);

            });

        },
        getInfo: function() {
            return {
                longname: 'TypeKit For TinyMCE',
                author: 'Tom J Nowell',
                authorurl: 'http://tomjn.com/',
                infourl: 'http://twitter.com/tarendai',
                version: "1.1"
            };
        }
    });
    tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();

@NeilJS
Copy link

NeilJS commented Jun 9, 2015

I found it better to disable font watching when using Typekit in WordPress admin - to ensure the test string was not getting into the saved content via TinyMCE.

Just add the following two properties to the config object:

var config = {\n\
    kitId: 'xxxxxx', events: false, classes: false\n\
};\n\

as per these instructions "If both events and classes are set to false, the Typekit JavaScript only inserts the CSS link to the fonts and does not perform any font watching." here: http://help.typekit.com/customer/portal/articles/649336

@patrick-wc
Copy link

patrick-wc commented Jun 18, 2015

Thanks man @NeilJS

Also huge thanks to Tom Nowell for getting this going in the first place.

@JoshRiser
Copy link

JoshRiser commented Sep 23, 2015

TinyMCE has since deprecated the onPreInit function in version 4.x, which WordPress now uses. It doesn't cause any errors, in fact it still works, but there is a log in the console stating that it is deprecated (giving no optimal solution, leaving it to me to save the day).

Replacing line 4 in typekit.tinymce.js with this will ensure future compatibility:

            ed.on('PreInit', function(e) {

Documentation on the on('PreInit') function is here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment