Mi sitio web usa typekit para capturar fuentes personalizadas, que funciona en la interfaz.
Me gustaría poner esto en mis estilos de editor en el backend. Sin embargo, no sé cómo haría esto. Typekit utiliza un fragmento de inserción js en lugar de un fragmento de inserción de fuente de css.
solución de complemento TinyMCE de Tom Nowell funciona de forma brillante, solo actualice el JavaScript para usar nuevo código asíncrono de Typekit . Una vez que use el nuevo código de inserción asíncrono, el problema 403 desaparecerá y tendrá TinyMCE habilitado para Typekit sin problemas.
Tom ha reunido todo el código en una publicación de blog. Él hizo todo el trabajo pesado en esto, así que dale algunas visitas de página y lee los detalles allí !
Resolví esto agregando un plugin de tinymce, está casi ahí pero estoy prohibiendo un 403 cuando intenta recuperar la fuente 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;
}
Puede poner en cola la secuencia de comandos para el administrador, entonces debería estar disponible para su 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 }
Se actualizó el código anterior para typekit ya que requiere algunos js en línea como los que mencionaste. También tenemos que cambiar la variable $ hook a $ pagenow ya que no usamos admin_enqueue_scripts.