Editorstile und Typekit

Meine Website verwendet Typekit, um benutzerdefinierte Schriftarten abzurufen, die im Frontend funktionieren.

Ich möchte dies in meine Editor-Stile im Backend einfügen. Ich weiß jedoch nicht, wie ich das machen würde. Typekit verwendet ein js-Einbettungs-Snippet anstelle eines CSS-Schriftarten-Einbettungs-Snippets.

Die TinyMCE-Plugin-Lösung von Tom Nowell funktioniert hervorragend. Aktualisieren Sie einfach das JavaScript, um den neuen asynchronen Code von Typekit zu verwenden . Sobald Sie den neuen asynchronen Einbettungscode verwenden, verschwindet das 403-Problem und Sie haben Typekit-fähiges TinyMCE ohne viel Aufhebens!

Tom hat den gesamten Code in einem Blogbeitrag zusammengefasst. Er hat das ganze schwere Heben gemacht, also gib ihm ein paar Seitenaufrufe und lies die Einzelheiten dort !

Ich habe dies umgangen, indem ich ein Tinymce-Plugin hinzugefügt habe. Es ist fast da, aber ich bekomme eine 403 verboten, wenn es versucht, die Schriftart CSS von Typekit abzurufen:

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;
}

Sie können das Skript für den Administrator in die Warteschlange stellen, dann sollte es für Ihre editor.css verfügbar sein

    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 }

Bearbeiten:

Der obige Code für typekit wurde aktualisiert, da einige Inline-Js wie von Ihnen erwähnt erforderlich sind. Wir müssen auch die Variable $ hook in $ pagenow ändern, da wir keine admin_enqueue_scripts verwenden.