รูปแบบตัวแก้ไขและประเภท


10

เว็บไซต์ของฉันใช้ typekit เพื่อจับแบบอักษรที่กำหนดเองซึ่งทำงานในส่วนหน้า

ฉันต้องการจะใส่สิ่งนี้ลงในสไตล์บรรณาธิการของฉันในแบ็กเอนด์ อย่างไรก็ตามฉันไม่รู้ว่าฉันจะทำอย่างไร Typekit ใช้ตัวอย่างโค้ดแบบฝังของ js แทนที่จะเป็นตัวอย่างโค้ดแบบอักษร - ใบหน้า css


แนะนำให้ย้ายไฟล์นี้ไปที่ stackoverflow - ไม่ใช่ปัญหาของ WP จริงๆ
anu

2
เป็นเพราะฉันรู้วิธีการพิมพ์ชุดในกรณีทั่วไป สิ่งที่ฉันพยายามจะทำคือใส่มันลงในโปรแกรมแก้ไข WordPress ถ้ามันถูกย้ายไปที่ Stack Overflow จะมีผู้คนจำนวนมากกำลังโหลด "hmmm แต่นี่คือคำถามของ WordPress = s"
Tom J Nowell

คำตอบ:


3

ทอม Nowell ของการแก้ปัญหาปลั๊กอิน TinyMCEทำงานเก่งเพียงแค่ปรับปรุง JavaScript เพื่อใช้รหัส async Typekit ใหม่ เมื่อคุณใช้โค้ดฝัง async ใหม่ปัญหา 403 จะหายไปและคุณจะมี TinyMCE ที่เปิดใช้งาน Typekit โดยไม่ยุ่งยาก!

ทอมใส่รหัสทั้งหมดเข้าด้วยกันในโพสต์บล็อก เขายกของหนักทั้งหมดนี้ออกไปให้เขาดูหน้าเว็บแล้วอ่านรายละเอียดที่นั่น !


มันทำอะไร (ฉันทั้งถามและตอบ = p) วิธีแก้ปัญหาของฉันจะใช้งานได้หากไม่ใช่เพื่อความปลอดภัยหากฉันสามารถตั้งค่า src ของ iframe เป็นหน้าว่างในโดเมนเดียวกันมันจะใช้ได้ฉันจะทดสอบรหัส async ใหม่ แต่!
Tom J Nowell

huzzah ก็เป็นอย่างนั้น !! =]
Tom J Nowell

คุณสามารถแก้ไขคำตอบของคุณด้วยรหัสรุ่นปรับปรุงของฉันเพียงเพื่อความสมบูรณ์หรือไม่
Tom J Nowell

ฉันได้เขียน blogpost ไว้ที่นี่: tomjn.com/150/typekit-wp-editor-stylesพร้อมรหัสใน gists คุณมีบัญชีทวิตเตอร์ที่ฉันสามารถให้เครดิตคุณในการหาบิต async หรือไม่?
Tom J Nowell

ฉันจะอัปเดตคำตอบของฉันเพื่อเชื่อมโยงไปยังโพสต์บล็อกของคุณ คุณยกของหนักที่นี่!
Chris Van Patten

6

ฉันได้รับรอบนี้โดยการเพิ่มปลั๊กอิน tinymce มันเกือบจะมี แต่ฉันได้รับ 403 ต้องห้ามเมื่อพยายามดึงตัวอักษร css จาก typekit:

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

ทั้งหมดนี้ใช้งานได้สำหรับฉัน มันต้องใช้งานและอดทนนิดหน่อย แต่ก็ใช้งานได้ดีจริงๆ!
racl101

0

คุณสามารถจัดคิวสคริปต์สำหรับผู้ดูแลระบบจากนั้นสคริปต์ดังกล่าวควรจะพร้อมใช้งานสำหรับ 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 }

แก้ไข:

อัปเดตโค้ดด้านบนสำหรับ typekit เนื่องจากต้องการ js แบบอินไลน์บางอย่างตามที่คุณกล่าวถึง นอกจากนี้เรายังต้องเปลี่ยนตัวแปร $ hook เป็น $ pagenow เนื่องจากไม่ได้ใช้ admin_enqueue_scripts


มันไม่ง่ายอย่างนั้นมันเป็นสคริปต์แบบอินไลน์ แต่ถ้าการเพิ่มเข้าไปในผู้ดูแลก็เพียงพอสำหรับ css ที่จะหยิบมันขึ้นมามันควรจะทำงานได้ =]
Tom J Nowell

มันใช้งานไม่ได้จริง ๆ นอกเหนือจากเครื่องหมายอัฒภาคที่ขาดหายไปและวงเล็บปิดเมื่อแก้ไขแล้วจะเพิ่มแบบอักษรในหน้าจอแก้ไขการโพสต์ฉันสามารถเปลี่ยน WordPress UI ได้ แต่ฉันไม่สามารถใช้แบบอักษรในสไตล์ตัวแก้ไขได้ เนื้อหาโพสต์ของฉันปฏิเสธที่จะใช้แบบอักษร typekit และแสดงในแบบอักษรตัวเลือกถัดไปแทน
Tom J Nowell

JS ตัวเองมันจะต้องปรากฏในการแทรกเข้าไปในการใช้ iframe tinyMCE ไม่ใช่เฟรมหลักที่โหลด WordPress โพสต์ UI
Tom J Nowell

ฉันสามารถแก้ไขปัญหาของไฟล์ CSS ที่ถูกห้ามได้โดยการคัดลอก css ไปยัง editor-style.css ของฉัน มันเป็นการแก้แฮ็คสุด ๆ แต่มันใช้ได้หลังจากฉันลองทุกอย่างอื่นแล้ว
โคล
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.