संपादक शैलियाँ और टाइपेकिट

Question

मेरी वेबसाइट कस्टम फोंट को हथियाने के लिए टाइपकिट का उपयोग करती है, जो फ्रंटएंड पर काम करती है।

मैं अपने संपादक शैलियों में इसे बैकएंड में रखना चाहता हूं। हालाँकि, मुझे नहीं पता कि मैं यह कैसे करूँगा। टाइपेकिट एक सीएसएस फ़ॉन्ट-फेस एम्बेड स्निपेट के बजाय एक जेएस एम्बेड स्निपेट का उपयोग करता है।

Comments

सुझाव है कि यह स्टैकओवरफ्लो में माइग्रेट किया गया है - यह वास्तव में एक WP मुद्दा नहीं है।

— अनु

यह आईएस है क्योंकि मैं जानता हूं कि सामान्य मामले में टाइपकाट कैसे किया जाता है। जो मैं करने की कोशिश कर रहा हूं वह वर्डप्रेस संपादक में डाल दिया गया है। यह स्टैक ओवरफ़्लो पर स्थानांतरित कर दी है, तो वहाँ बस आगे बढ़ते लोगों के एक लोड हो जाएगा "हममम, लेकिन यह एक वर्डप्रेस सवाल = रों है"

— टॉम जम्मू नॉवेल

Answer 1

टॉम नोवेल का टिनीएमसीई प्लगइन समाधान शानदार ढंग से काम करता है, बस टाइपकेट के नए एसिंक्स कोड का उपयोग करने के लिए जावास्क्रिप्ट को अपडेट करें । एक बार जब आप नए async एम्बेड कोड का उपयोग करते हैं, तो 403 समस्या गायब हो जाती है और आपके पास कोई उपद्रव के साथ Typekit- सक्षम TinyMCE होगा!

टॉम ने एक ब्लॉग पोस्ट में सभी कोड एक साथ रखे हैं। उन्होंने इस पर सभी भारी उठाने का काम किया, इसलिए उन्हें कुछ पृष्ठ साक्षात्कार दें और वहां की बारीकियों को पढ़ें !

Comments

ऐसा होता है? (यदि मैंने पूछा और उत्तर दिया = p) मेरा समाधान काम करेगा अगर यह सुरक्षा के लिए नहीं था, अगर मैं iframe के src को उसी डोमेन पर एक खाली पृष्ठ पर सेट कर सकता हूं तो यह काम करेगा, मैं नए async कोड का परीक्षण करूंगा हालांकि!

— टॉम जम्मू नॉवेल

अच्छा हुज़ूर यह करता है !! =]

— टॉम जम्मू नॉवेल

क्या आप पूर्णता के लिए मेरे कोड के अद्यतन संस्करण के साथ अपना उत्तर संशोधित कर सकते हैं?

— टॉम जम्मू नॉवेल

मैंने यहां एक ब्लॉगपोस्ट लिखा है: tomjn.com/150/typekit-wp-editor-styles with the code in gists, क्या आपके पास एक ट्विटर अकाउंट है जो मैं आपको async बिट का पता लगाने के लिए क्रेडिट कर सकता हूं?

— टॉम जम्मू नॉवेल

मैं अपने उत्तर को आपके ब्लॉग पोस्ट से लिंक करने के लिए अपडेट करूंगा। आपने यहां भारी लिफ्टिंग की!

— क्रिस वान पैटन

Answer 2

मैं एक टिनिम्सम प्लगइन जोड़कर इसके चारों ओर हो गया, यह लगभग वहाँ है, लेकिन Im को 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);
})();

पीएचपी

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

Comments

यह पूरी तरह से मेरे लिए काम किया। इसके लिए थोड़ी मेहनत और धैर्य की आवश्यकता होती है लेकिन यह वास्तव में अच्छी तरह से काम करता है!

— racl101

Answer 3

आप स्क्रिप्ट को व्यवस्थापक के लिए संलग्न कर सकते हैं तो यह आपके Editor.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 }

संपादित करें:

टाइपेकिट के लिए ऊपर दिए गए कोड को अपडेट करें क्योंकि इसके लिए कुछ इनलाइन js की आवश्यकता होती है जैसे कि आपने उल्लेख किया है। हमें admin_enqueue_scripts का उपयोग नहीं करने के बाद से $ हुक चर को $ pagenow में बदलना होगा।

Comments

कि के रूप में सरल रूप में नहीं है, यह की इनलाइन स्क्रिप्ट है, लेकिन अगर व्यवस्थापक में इसे जोड़ने के लिए पर्याप्त है सीएसएस यह लेने के लिए के लिए तो यह काम करना चाहिए =]

— टॉम जम्मू नॉवेल

यह वास्तव में काम नहीं करता है। एक लापता अर्धविराम और एक समापन ब्रैकेट के अलावा, एक बार तय होने के बाद यह फ़ॉन्ट को पोस्ट एडिट स्क्रीन में जोड़ता है, मैं वर्डप्रेस यूआई को बदल सकता हूं, लेकिन मैं संपादक शैलियों में फ़ॉन्ट का उपयोग नहीं कर सकता। मेरी पोस्ट की सामग्री टाइपटेक फोंट का उपयोग करने से इंकार करती है और इसके बजाय अगले फ़ॉलबैक फोंट उपलब्ध हैं।

— टॉम जम्मू नॉवेल

जे एस ही यह जरूरतों आइफ्रेम tinyMCE का उपयोग करता है में डालने प्रकट होता है, न कि माता-पिता फ्रेम कि भार वर्डप्रेस पोस्ट यूआई

— टॉम जम्मू नॉवेल

मैं अपने एडिटर-स्टाइल.एसएस में सीएसएस की प्रतिलिपि बनाकर सीएसएस फ़ाइल की मनाही की समस्या को ठीक करने में सक्षम था। यह एक सुपर हैकिश फिक्स है लेकिन यह काम किया है, के बाद मैंने बस बाकी सब के बारे में कोशिश की थी।

— कोल