Mon site Web utilise typekit pour récupérer des polices personnalisées, ce qui fonctionne sur le front-end.
J'aimerais mettre cela dans mes styles d'éditeur dans le backend. Cependant, je ne sais pas comment je le ferais. Typekit utilise un extrait js embed plutôt qu'un extrait css font-face-embed.
La solution de plug-in TinyMCE de Tom Nowell fonctionne à merveille. Il suffit de mettre à jour le code JavaScript pour utiliser le nouveau code asynchrone de Typekit . Une fois que vous utilisez le nouveau code intégré asynchrone, le problème 403 disparaît et vous obtenez TinyMCE compatible Typekit sans aucun problème!
Tom a rassemblé tout le code dans un article de blog. Il a fait tout le travail lourd à ce sujet, alors allez lui donner quelques pages vues et lisez les détails ici !
J'ai contourné ce problème en ajoutant un plugin tinymce, il y est presque, mais je suis interdit par un 403 quand il essaie de récupérer les polices css de typekit:
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 = "var TypekitConfig = {\n\
kitId: '*******'\n\
};\n\
(function() {\n\
var tk = document.createElement('script');\n\
tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';\n\
tk.type = 'text/javascript';\n\
tk.async = 'true';\n\
tk.onload = tk.onreadystatechange = function() {\n\
var rs = this.readyState;\n\
if (rs && rs != 'complete' && rs != 'loaded') return;\n\
try { Typekit.load(TypekitConfig); } 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.0"
};
}
});
tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();
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;
}
Vous pouvez mettre le script en file d'attente pour l'administrateur, alors il devrait être disponible pour votre editor.css
add_action( 'admin_print_scripts', 'admin_typekit' );
function admin_typekit( ) {
global $pagenow;
$arg = array( 'post.php', 'post-new.php', 'page-new.php', 'page.php' );
if ( ! in_array( $pagenow, $arg ))
return; ?>
<script type="text/javascript">
(function () {
var config = {
kitId:'xxxxxx',
scriptTimeout:3000
};
var h = document.getElementsByTagName("html")[0];
h.className += " wf-loading";
var t = setTimeout(function () {
h.className = h.className.replace(/( |^)wf-loading( |$)/g, "");
h.className += " wf-inactive"
}, config.scriptTimeout);
var tk = document.createElement("script");
tk.src = '//use.typekit.net/' + config.kitId + '.js';
tk.type = "text/javascript";
tk.async = "true";
tk.onload = tk.onreadystatechange = function () {
var a = this.readyState;
if (a && a != "complete" && a != "loaded")return;
clearTimeout(t);
try {
Typekit.load(config)
} catch (b) { } };
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(tk, s)
})();
</script>
<?php }
Mis à jour le code ci-dessus pour le typekit, car il nécessite quelques js en ligne comme vous l'avez mentionné Nous devons également modifier la variable $ hook en $ pagenow car nous n’utilisions pas admin_enqueue_scripts.