Estilos de Editor y Typekit

10

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.

    
pregunta Tom J Nowell 25.07.2012 - 16:25

3 respuestas

3

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í !

    
respondido por el Chris Van Patten 09.09.2012 - 04:45
6

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;
}
    
respondido por el Tom J Nowell 15.08.2012 - 16:49
0

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 }

Editar:

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.

    
respondido por el Chris_O 25.07.2012 - 16:36

Lea otras preguntas en las etiquetas