Kiểu soạn thảo và Typekit

Trang web của tôi sử dụng typekit để lấy các phông chữ tùy chỉnh, hoạt động trên frontend.

Tôi muốn đặt cái này trong các kiểu soạn thảo của mình trong phần phụ trợ. Tuy nhiên, tôi không biết làm thế nào tôi sẽ làm điều này. Typekit sử dụng đoạn mã nhúng js thay vì đoạn mã nhúng mặt chữ css.

Giải pháp plugin TinyMCE của Tom Nowell hoạt động tuyệt vời, chỉ cần cập nhật JavaScript để sử dụng mã async mới của Typekit . Khi bạn sử dụng mã nhúng async mới, vấn đề 403 sẽ biến mất và bạn sẽ có TinyMCE hỗ trợ Typekit mà không phải lo lắng!

Tom đã đặt tất cả các mã với nhau trong một bài viết trên blog. Anh ấy đã làm tất cả những việc nặng nề về việc này, vì vậy hãy đưa cho anh ấy một số lượt xem trang và đọc chi tiết cụ thể ở đó !

Tôi đã khắc phục điều này bằng cách thêm một plugin tinymce, nó gần như ở đó nhưng tôi bị cấm 403 khi nó cố lấy lại phông chữ css từ 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;
}

Bạn có thể liệt kê tập lệnh cho quản trị viên, sau đó nó sẽ có sẵn cho trình soạn thảo của bạn.

    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 }

Biên tập:

Đã cập nhật mã ở trên cho typekit vì nó yêu cầu một số js nội tuyến như bạn đã đề cập. Chúng tôi cũng phải thay đổi biến $ hook thành $ pagenow vì không sử dụng admin_enqueue_scripts.