Gaya Editor dan Typekit

Situs web saya menggunakan typekit untuk mengambil font khusus, yang berfungsi di frontend.

Saya ingin meletakkan ini di gaya editor saya di backend. Namun, saya tidak tahu bagaimana saya akan melakukan ini. Typekit menggunakan snippet embed js daripada snippet embed font-face css.

Solusi plugin TinyMCE dari Tom Nowell bekerja dengan sangat baik, cukup perbarui JavaScript untuk menggunakan kode async baru Typekit . Setelah Anda menggunakan kode semat async baru, masalah 403 menghilang dan Anda akan memiliki TinyMCE yang diaktifkan Typekit tanpa keributan!

Tom telah memasukkan semua kode dalam satu posting blog. Dia melakukan semua hal yang berat, jadi berikan dia beberapa tampilan halaman dan bacalah secara spesifik di sana !

Saya menyiasatinya dengan menambahkan plugin tinymce, itu hampir ada tetapi saya mendapatkan 403 terlarang ketika mencoba untuk mengambil font css dari 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;
}

Anda dapat membuat skrip untuk admin kemudian harus tersedia untuk editor.css Anda

    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 }

Edit:

Diperbarui kode di atas untuk typekit karena memerlukan beberapa js inline seperti yang Anda sebutkan. Kita juga harus mengubah variabel $ hook menjadi $ pagenow karena tidak menggunakan admin_enqueue_scripts.