에디터 스타일과 타입 킷

내 웹 사이트는 typekit을 사용하여 프런트 엔드에서 작동하는 사용자 정의 글꼴을 가져옵니다.

백엔드의 편집기 스타일에 이것을 넣고 싶습니다. 그러나 나는 이것을 어떻게 할 것인지 모른다. Typekit은 CSS font-face embed 스 니펫 대신 js embed 스 니펫을 사용합니다.

Tom Nowell의 TinyMCE 플러그인 솔루션 은 훌륭하게 작동합니다. JavaScript를 업데이트하여 Typekit의 새로운 비동기 코드 를 사용 하십시오 . 새로운 비동기 소스 코드를 사용하면 403 문제가 사라지고 번거 로움없이 Typekit 지원 TinyMCE를 사용할 수 있습니다!

Tom은 모든 코드를 블로그 게시물에 정리했습니다. 그는 이것에 대해 많은 노력을 기울 였으므로 페이지 뷰를 제공하고 거기에 대한 세부 사항을 읽으십시오 !

tinymce 플러그인을 추가 하여이 문제를 해결했습니다. 거의 거기에 있지만 typekit에서 글꼴 CSS를 검색하려고 할 때 403이 금지됩니다.

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

관리자를 위해 스크립트를 대기열에 넣을 수 있으며 편집기에서 사용할 수 있어야합니다.

    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 }

편집하다:

위에서 언급 한 것처럼 인라인 j가 필요하므로 typekit에 대해 위의 코드를 업데이트했습니다. 또한 admin_enqueue_scripts를 사용하지 않았으므로 $ hook 변수를 $ pagenow로 변경해야합니다.