Styles d'édition et de frappe

10

Mon site Web utilise typekit pour capturer des polices personnalisées, ce qui fonctionne sur le client.

Je voudrais 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.

    
posée Tom J Nowell 25.07.2012 - 16:25

3 réponses

3

La solution de plug-in TinyMCE de Tom Nowell fonctionne à merveille , il suffit de mettre à jour le JavaScript pour utiliser nouveau code async deTypekit . Une fois que vous utilisez le nouveau code intégré asynchrone, le problème 403 disparaît et vous obtenez TinyMCE compatible Typekit sans 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 lire les détails ici !

    
réponse donnée Chris Van Patten 09.09.2012 - 04:45
6

J'ai contourné ce problème en ajoutant un plugin tinymce, il y est presque, mais je me suis vu interdire un 403 quand il essaie de récupérer la police 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;
}
    
réponse donnée Tom J Nowell 15.08.2012 - 16:49
0

Vous pouvez mettre le script en file d'attente pour l'administrateur, 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 }

Modifier:

Mise à jour le code ci-dessus pour typekit, car il nécessite des scripts jS en ligne comme ceux que vous avez mentionnés. Nous devons également modifier la variable $ hook en $ pagenow car nous n’utilisions pas admin_enqueue_scripts.

    
réponse donnée Chris_O 25.07.2012 - 16:36

Lire d'autres questions sur les étiquettes