Stili dell'editor e Typekit

Il mio sito Web utilizza typekit per acquisire caratteri personalizzati, che funzionano sul frontend.

Vorrei metterlo nei miei stili di editor nel backend. Tuttavia, non so come lo farei. Typekit utilizza uno snippet di incorporamento js anziché uno snippet di incorporamento di caratteri CSS.

La soluzione di plugin TinyMCE di Tom Nowell funziona alla grande, basta aggiornare JavaScript per usare il nuovo codice asincrono di Typekit . Dopo aver usato il nuovo codice di incorporamento asincrono, il problema 403 scompare e avrai TinyMCE abilitato per Typekit senza problemi!

Tom ha raccolto tutto il codice in un post sul blog. Ha fatto tutto il lavoro pesante su questo, quindi vai a dargli alcune visualizzazioni di pagina e leggere le specifiche lì !

Ho aggirato questo aggiungendo un plugin tinymce, è quasi lì ma mi sto vietando un 403 quando tenta di recuperare il font css da 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;
}

Puoi accodare lo script per admin, quindi dovrebbe essere disponibile per il tuo 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 }

Modificare:

Aggiornato il codice sopra per typekit poiché richiede alcuni js in linea come hai menzionato. Dobbiamo anche cambiare la variabile $ hook in $ pagenow poiché non utilizzavano admin_enqueue_scripts.