web-dev-qa-db-fra.com

Faire en sorte que les polices fonts.com fonctionnent dans TinyMCE (problème de référent iframe)

J'utilise des polices personnalisées (commerciales) dans mon projet. Tout fonctionne bien dans le frontend.

J'ai toutefois remarqué qu'en essayant d'ajouter cette police à l'iframe TinyMCE, je recevais un 403 pour les polices Web. Le problème semble être que les requêtes de l'iframe n'ont pas de référent. Et fonts.com a besoin d'un référent pour valider la demande.

Des pensées?

wp-adminadmintinymceiframe
5
Aron Woost

J'ai rencontré ce problème avec Typekit, voici ma solution:

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

et ce 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);
})();

Il insère le code de typekit à l'intérieur de l'iframe. Vous voudrez le remplacer par le script et le test intégrés de fonts.com. Malheureusement, je ne connais pas bien les mesures de sécurité de fonts.com et les codes d’incorporation exacts utilisés

5
Tom J Nowell

Si vous souhaitez ajouter vos styles personnalisés à l'éditeur TinyMCE dans WordPress, vous devez créer un fichier CSS, par exemple editor.css et le placer dans votre dossier de thèmes. Ensuite, ajoutez l’initialisation de votre police dans ce css, comme ceci:

@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 */

Ensuite, vous devez mettre correctement votre fichier editor.css en file d'attente. Pour ce faire, vous devez appeler la fonction de style add_editor_style:

add_action( 'after_setup_theme', 'wpse8170_init_editor_styles' );
function wpse8170_init_editor_styles() {
    add_editor_style( 'editor.css' );
}

Si vous avez uniquement le fichier de police .ttf, vous devez le convertir en .woff. Vous pouvez le faire ici .

1
Eugene Manuilov

Utilisez cette fonction dans le fichier functions.php de votre plugin ou de votre thème:

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

Nous avons donc appelé un fichier customfont.php dans l'éditeur wp. Ce fichier est un fichier php mais fonctionnera comme un fichier css. Et voici notre customfont.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;}

Ceci est un exemple de thème Firmasite . Peut-être que cela fonctionnera pour vous. Si vous obtenez toujours 403, vous pouvez ajouter des en-têtes php comme header("Referer: http://example.org");

1
Ünsal Korkmaz