使Fonts.com字体在TinyMCE中工作(iframe引用程序问题)

时间:2013-03-05 作者:Aron Woost

我在我的项目中使用自定义(商业)字体。前端一切正常。

然而,我注意到,当尝试将此字体添加到TinyMCE iframe时,我得到了403的webfonts。问题似乎是,来自iframe的请求没有推荐人。和字体。com需要一个推荐人来验证请求。

有什么想法吗?

3 个回复
SO网友:Tom J Nowell

我在Typekit中遇到了这个问题,下面是我的解决方案:

http://www.tomjn.com/150/typekit-wp-editor-styles/

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;
}
这个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 = "(function() {\\n\\
                    var config = {\\n\\
                        kitId: \'xxxxxxx\'\\n\\
                    };\\n\\
                    var d = false;\\n\\
                    var tk = document.createElement(\'script\');\\n\\
                    tk.src = \'//use.typekit.net/\' + config.kitId + \'.js\';\\n\\
                    tk.type = \'text/javascript\';\\n\\
                    tk.async = \'true\';\\n\\
                    tk.onload = tk.onreadystatechange = function() {\\n\\
                        var rs = this.readyState;\\n\\
                        if (d || rs && rs != \'complete\' && rs != \'loaded\') return;\\n\\
                        d = true;\\n\\
                        try { Typekit.load(config); } 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.1"
            };
        }
    });
    tinymce.PluginManager.add(\'typekit\', tinymce.plugins.typekit);
})();
它在iframe中插入typekit代码,您需要将代码更改为字体。com嵌入脚本和测试。不幸的是,我不熟悉字体的安全保护措施。com和他们使用的确切嵌入代码

SO网友:Eugene Manuilov

如果您想将自定义样式添加到WordPress中的TinyMCE编辑器中,您需要创建一个css文件,例如editor.css 并将其放入主题文件夹中。之后,在该css中添加字体面初始化,如下所示:

@font-face {
  font-family: \'Your font name\';
  font-style: normal;
  font-weight: 400;
  src: local(\'Your font name\'), local(\'Your font name\'), url(http://yoursite.com/path/to/your/font.woff) format(\'woff\');
}

body {
    font-family: \'Your font name\', Helvetica, Arial, sans-serif;
}

/* etc styling */
然后您需要将您的editor.css 文件要做到这一点,你需要打电话add_editor_style 样式功能:

add_action( \'after_setup_theme\', \'wpse8170_init_editor_styles\' );
function wpse8170_init_editor_styles() {
    add_editor_style( \'editor.css\' );
}
如果你有.ttf 仅字体文件,您需要将其转换为.woff. 你能做到的here.

SO网友:Ünsal Korkmaz

在插件或主题的函数中使用此函数。php文件:

// Tell the TinyMCE editor to use a custom stylesheet
add_filter(\'the_editor_content\', "firmasite_tinymce_style");
function firmasite_tinymce_style($content) {
    add_editor_style(\'assets/css/customfont.php\');

    // This is for front-end tinymce customization
    if ( ! is_admin() ) {
        global $editor_styles;

        $editor_styles = (array) $editor_styles;
        $stylesheet    = array();

        $stylesheet[] = \'assets/css/customfont.php\';        

        $editor_styles = array_merge( $editor_styles, $stylesheet );

    }
    return $content;
}
所以我们称之为customfont。php文件到wp编辑器。该文件是一个php文件,但可以作为css文件使用。这是我们的自定义字体。php:

<?php
/*
 * This file using for loading custom google font in wp-editor
*/
define(\'WP_USE_THEMES\', false);
if (file_exists($_SERVER[\'DOCUMENT_ROOT\'] . \'/wp-blog-header.php\')) {
    /** Loads the WordPress Environment and Template */
    require($_SERVER[\'DOCUMENT_ROOT\'] . \'/wp-blog-header.php\');
    status_header(200);
    header("Content-type: text/css");
} else {
    exit;
}
?>
@import url(http://fonts.googleapis.com/css?family=<?php echo urlencode("Amarante"); ?>&subset=latin,latin-ext);
body { font-family: Amarante,sans-serif !important;}
这是来自Firmasite theme. 也许这对你有用。如果仍然得到403,可以添加一些php头,如header("Referer: http://example.org");

结束

相关推荐

“ADMIN_ENQUEUE_SCRIPTS”挂钩还是$_GET[‘PAGE’]?

将函数添加到“admin\\u enqueue\\u scripts”时,会向该函数传递一个钩子。它看起来像是“toplevel\\u page\\u nameofyourpage”。这很好,但它与检查$\\u GET变量以查看您所在的页面有何不同?一个优先于另一个吗?为什么?我只是说当你创建自己的菜单时,而不是默认的管理页面。