Editorstile und Typekit

10

Meine Website verwendet Typekit, um benutzerdefinierte Schriftarten abzurufen, die im Frontend funktionieren.

Ich möchte dies in meine Editor-Stile im Backend einfügen. Ich weiß jedoch nicht, wie ich das machen würde. Typekit verwendet ein js-Einbettungs-Snippet anstelle eines CSS-Schriftarten-Einbettungs-Snippets.

Tom J Nowell
quelle
Schlagen Sie vor, dass dies auf Stackoverflow migriert wird - es ist nicht wirklich ein WP-Problem.
Anu
2
Es ist, weil ich weiß, wie man Typekit im allgemeinen Fall macht. Ich versuche es in den WordPress-Editor zu stellen. Wenn es auf Stack Overflow umgestellt wird, wird es nur eine Menge Leute geben, die "hmmm, aber das ist eine WordPress-Frage = s" sagen
Tom J Nowell

Antworten:

3

Die TinyMCE-Plugin-Lösung von Tom Nowell funktioniert hervorragend. Aktualisieren Sie einfach das JavaScript, um den neuen asynchronen Code von Typekit zu verwenden . Sobald Sie den neuen asynchronen Einbettungscode verwenden, verschwindet das 403-Problem und Sie haben Typekit-fähiges TinyMCE ohne viel Aufhebens!

Tom hat den gesamten Code in einem Blogbeitrag zusammengefasst. Er hat das ganze schwere Heben gemacht, also gib ihm ein paar Seitenaufrufe und lies die Einzelheiten dort !

Chris Van Patten
quelle
Es tut? (Ich habe sowohl gefragt als auch geantwortet = p) Meine Lösung würde funktionieren, wenn es nicht die Sicherheit gäbe. Wenn ich den Quellcode des Iframes auf eine leere Seite in derselben Domäne setzen könnte, in der er funktionieren würde, werde ich den neuen asynchronen Code testen obwohl!
Tom J Nowell
Na huzzah tut es !! =]
Tom J Nowell
Könnten Sie Ihre Antwort der Vollständigkeit halber mit der aktualisierten Version meines Codes ändern?
Tom J Nowell
Ich habe hier einen Blogpost geschrieben: tomjn.com/150/typekit-wp-editor-styles mit dem Code in Gists. Haben Sie einen Twitter-Account, den ich Ihnen gutschreiben kann, um das asynchrone Bit herauszufinden?
Tom J Nowell
Ich werde meine Antwort aktualisieren, um auf Ihren Blog-Beitrag zu verlinken. Du hast das schwere Heben hier gemacht!
Chris Van Patten
6

Ich habe dies umgangen, indem ich ein Tinymce-Plugin hinzugefügt habe. Es ist fast da, aber ich bekomme eine 403 verboten, wenn es versucht, die Schriftart CSS von Typekit abzurufen:

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;
}
Tom J Nowell
quelle
Das hat bei mir total geklappt. Es erfordert ein wenig Arbeit und Geduld, aber es funktioniert wirklich gut!
racl101
0

Sie können das Skript für den Administrator in die Warteschlange stellen, dann sollte es für Ihre editor.css verfügbar sein

    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 }

Bearbeiten:

Der obige Code für typekit wurde aktualisiert, da einige Inline-Js wie von Ihnen erwähnt erforderlich sind. Wir müssen auch die Variable $ hook in $ pagenow ändern, da wir keine admin_enqueue_scripts verwenden.

Chris_O
quelle
Ist nicht so einfach, es ist ein Inline-Skript, aber wenn das Hinzufügen im Admin ausreicht, damit das CSS es aufnimmt, sollte es funktionieren =]
Tom J Nowell
Das funktioniert eigentlich nicht. Abgesehen von einem fehlenden Semikolon und einer schließenden Klammer kann ich die WordPress-Benutzeroberfläche ändern, sobald sie behoben ist. Dadurch kann ich die Schriftart zum Nachbearbeitungsbildschirm hinzufügen, aber ich kann die Schriftart nicht in den Editorstilen verwenden. Mein Beitragsinhalt lehnt die Verwendung von Typekit-Schriftarten ab und wird stattdessen in den nächsten verfügbaren Fallback-Schriftarten angezeigt.
Tom J Nowell
Das JS selbst, wie es scheint, muss in den iframe eingefügt werden, den tinyMCE verwendet, nicht in den übergeordneten Frame, der die Benutzeroberfläche des WordPress-Posts lädt
Tom J Nowell
Ich konnte das Problem beheben, dass die CSS-Datei verboten war, indem ich das CSS in meine editor-style.css kopierte. Es ist eine super hackige Lösung, aber es hat funktioniert, nachdem ich fast alles andere ausprobiert hatte.
Cole