Editor Styles and Typekit

时间:2012-07-25 作者:Tom J Nowell

我的网站使用typekit获取自定义字体,它在前端工作。

我想把它放在后端的编辑器样式中。然而,我不知道我该怎么做。Typekit使用js嵌入段而不是css字体嵌入段。

3 个回复
最合适的回答,由SO网友:Chris Van Patten 整理而成

Tom Nowell的TinyMCE plugin solution 工作非常出色,只需更新JavaScript即可使用Typekit\'s new async code. 一旦您使用了新的异步嵌入代码,403问题就会消失,您就可以轻松地启用Typekit了TinyMCE!

汤姆把所有的代码放在一篇博客文章中。他在这件事上做了很多工作,所以给他一些浏览量read the specifics there!

SO网友:Tom J Nowell

我通过添加一个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;
}

SO网友:Chris_O

您可以为admin将脚本排队,然后它应该可以用于您的编辑器。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 }
编辑:更新了typekit的上述代码,因为它需要一些您提到的内联js。我们还必须将$hook变量更改为$pagenow,因为我们没有使用admin\\u enqueue\\u脚本。

结束

相关推荐

Admin menus and submenus

我为管理员创建了一个选项页面,并将其显示为顶级菜单->add_menu_page($themename, $themename, \'administrator\', basename(__FILE__), \'mytheme_admin\');我想在我创建的顶级菜单下添加一个子菜单,以显示完全相同的页面(显示为子菜单,但当用户单击顶级菜单时也会打开此页面)。此外,我不知道如何在这个顶级菜单下添加我创建的另一个主题页面。在这里询问之前,我已经阅读了wordpress文档,但无法完成。非常感谢。