Editor de Estilos y Typekit


10

Mi sitio web utiliza typekit para obtener fuentes personalizadas, que funcionan 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 incrustación js en lugar de un fragmento de incrustación de fuente css.


sugiera que esto se migre a stackoverflow: no es realmente un problema de WP.
anu

2
ES porque sé cómo hacer typekit en el caso general. Lo que intento hacer es ponerlo en el editor de WordPress. Si se trasladó a Stack Overflow, solo habrá un montón de personas diciendo "hmmm, pero esta es una pregunta de WordPress = s"
Tom J Nowell

Respuestas:


3

La solución de complemento TinyMCE de Tom Nowell funciona de manera brillante, solo actualice el JavaScript para usar el nuevo código asincrónico 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 sobre esto, así que ve y dale algunas páginas vistas y lee los detalles allí .


¿Lo hace? (Pregunté y respondí = p) mi solución funcionaría si no fuera por la seguridad, si pudiera establecer el src del iframe en una página en blanco en el mismo dominio que funcionaría, probaré el nuevo código asíncrono ¡aunque!
Tom J Nowell

Bueno huzzah lo hace !! =]
Tom J Nowell

¿Podría modificar su respuesta con la versión actualizada de mi código solo para completarla?
Tom J Nowell

He escrito una entrada de blog aquí: tomjn.com/150/typekit-wp-editor-styles con el código en forma esencial, ¿tiene una cuenta de Twitter que pueda acreditarle por descubrir el bit asíncrono?
Tom J Nowell

Actualizaré mi respuesta para vincular a tu publicación de blog. ¡Hiciste el trabajo pesado aquí!
Chris Van Patten

6

Resolví esto agregando un complemento tinymce, casi está allí, pero tengo un 403 prohibido 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;
}

Esto funcionó totalmente para mí. Requiere un poco de trabajo y paciencia, ¡pero funciona muy bien!
racl101

0

Puede poner en cola el script 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 usted mencionó. También tenemos que cambiar la variable $ hook a $ pagenow ya que no estábamos usando admin_enqueue_scripts.


No es tan simple como eso, es un script en línea, pero si agregarlo en el administrador es suficiente para que el CSS lo recoja, entonces debería funcionar =]
Tom J Nowell

Esto en realidad no funciona. Además de un punto y coma faltante y un corchete de cierre, una vez reparado agrega la fuente a la pantalla de edición de publicaciones, puedo cambiar la interfaz de usuario de WordPress, pero no puedo usar la fuente en los estilos del editor. El contenido de mi publicación se niega a usar las fuentes typekit y, en su lugar, se muestra en cualquier fuente de reserva disponible.
Tom J Nowell

El JS en sí parece que necesita insertarse en el iframe que usa tinyMCE, no el marco principal que carga la interfaz de usuario de la publicación de WordPress
Tom J Nowell

Pude solucionar el problema de la prohibición del archivo CSS copiando el CSS en mi editor-style.css. Es una solución súper agresiva, pero funcionó, después de haber intentado casi todo lo demás.
Cole
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.