Typekit fonts for TinyMCE editor plugin

typekit.editor.php

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;
}

typekit.tinymce.js

(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);
})();

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)

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);
})();

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

Thanks man @NeilJS

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

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.