วิธีเพิ่ม CSS แบบกำหนดเอง (ตัวเลือกชุดรูปแบบ) ลงใน TinyMCE

14

ฉันกำลังพยายามเพิ่ม CSS ที่กำหนดเอง (ตั้งค่าผ่านตัวเลือกชุดรูปแบบ) ให้กับโปรแกรมแก้ไขภาพ TinyMCE ใน WordPress ที่ส่วนหน้า, ธีมจะสร้าง CSS นี้และส่งออกไปที่wp_headhook ปัญหาที่ฉันพบคือสามารถเพิ่มเอาท์พุท CSS นั้นลงในตัวแก้ไขได้

ไม่สามารถทำได้add_editor_style( 'editor-style.css' )เนื่องจากเราจำเป็นต้องใช้ PHP เพื่อเข้าถึงตัวเลือกชุดรูปแบบ

ตัวอย่างของวิธีการใช้งานที่ส่วนหน้า:

add_action( 'wp_head', 'my_custom_colors' );

function my_custom_colors() {
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "<style type='text/css'>a { color: #{$color_1}; }";
}

ฉันต้องการวิธีในการทำให้สไตล์ที่กำหนดเองนั้นเป็นโปรแกรมแก้ไขภาพ ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชมอย่างมาก.

tinymce

— Justin Tadlock
แหล่งที่มา

1

หมายเหตุ: CSS โพสต์เนื้อหาที่กำหนดเองเป็นอาณาเขตปลั๊กอินและไม่ควรใส่ในธีม มิฉะนั้นผู้ใช้จะสูญเสีย CSS ที่กำหนดเองเมื่อเปลี่ยนไปใช้ธีมอื่น

— Chip Bennett

@ChipBennett ฉันเห็นด้วยเพียงบางส่วนเท่านั้น สิ่งนี้ขึ้นอยู่กับว่าคุณกำลังใส่สไตล์อะไร นอกเหนือจากนั้นมันไม่สำคัญว่าจะอยู่ที่ไหน (สำหรับคำถามนั้น)

— ไกเซอร์

@ChipBennett สิ่งนี้เกี่ยวข้องกับสไตล์ของธีมไม่ใช่ CSS เนื้อหาของโพสต์ที่กำหนดเอง นี่เป็นสิ่งมาตรฐานที่คุณสามารถทำได้ด้วย Customizer Theme มันใช้สไตล์เหล่านี้ที่ทำให้ฉันนิ่งงัน มันหมายถึงการชมเชยeditor-style.cssซึ่งเป็นดินแดนของธีม

— Justin Tadlock

รอ: คุณกำลังพูดถึงสไตล์ตัวแก้ไขแบบกำหนดเองแบบไดนามิกหรือไม่ เช่นเดียวกับใน: ทำให้โปรแกรมแก้ไขภาพ (TinyMCE) ตระหนักถึงสไตล์ที่กำหนดโดยตัวเลือกธีมหรือไม่ ถ้าเป็นเช่นนั้นไม่ต้องสนใจความคิดเห็นดั้งเดิมของฉันและ+1สำหรับคำถาม

— Chip Bennett

คุณสามารถแก้ไขไฟล์และแสดงตัวอย่างของชุดเต็มสำหรับสไตล์ของธีมได้หรือไม่? จะทดสอบได้ง่ายขึ้นแล้ว

— ไกเซอร์

7

โซลูชันที่ 1

สิ่งนี้ทำงานเป็นโซลูชัน javascript:

ตัวอย่าง:

tinyMCE.activeEditor.dom.addStyle('p {color:red; font-size:28px;}');

เพียงเปิดคอนโซล js ของคุณและวางเพื่อทดสอบอย่างรวดเร็ว หากต้องการกำหนดเป้าหมายเครื่องมือแก้ไขเฉพาะควรใช้:

tinyMCE.getInstanceById('##editorID##').dom.addStyle('p {color:red; font-size:28px;}');

นี่จะเป็นการแทรกสตริงที่จัดเตรียมไว้ใน iframe ของเอดิเตอร์ <head><style id="mceDefaultStyles"></style> ...

โซลูชันที่ 2

ใช้ wp_ajax เป็นตัวจัดการการโทรกลับเพื่อเพิ่มสไตล์แบบไดนามิกบนตัวแก้ไข init โดยใช้ตัวกรอง

add_filter('tiny_mce_before_init', 'dynamic_editor_styles', 10);

function dynamic_editor_styles($settings){
    // you could use a custom php file as well, I'm using wp_ajax as
    // callback handler for demonstration
    // content_css is a string with several files seperated by a comma
    // e.g. file1, file2, ... extend the string

    $settings['content_css'] .= ",".admin_url('admin-ajax.php') ."/?action=dynamic_styles";

    return $settings;
}

// add wp_ajax callback
add_action('wp_ajax_dynamic_styles', 'dynamic_styles_callback');
function dynamic_styles_callback(){
    echo "p {color:red} h1{font-size:48px;}";
}

— ungestaltbar
แหล่งที่มา

2

ฉันไม่แน่ใจว่าจะทำอย่างไรกับสิ่งนั้น

— Justin Tadlock

โซลูชัน # 2 ทำให้ฉันมีเหตุผล ฉันจะให้ทดสอบการทำงาน

— Justin Tadlock

ฉันไปกับโซลูชัน # 2 ความแตกต่างคือฉันลดฟังก์ชั่นแรกและใช้add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )เนื่องจากนี่เป็นวิธีมาตรฐานสำหรับชุดรูปแบบเพื่อเพิ่มสไตล์ตัวแก้ไข

— Justin Tadlock

เพียงเพื่อการดัดแปลงของฉันเองฉันอยากรู้ว่าmce_cssทำงานให้คุณได้หรือไม่ (ถ้าคุณลอง)

— Chip Bennett

ฉันยังไม่ได้ลองเพราะฉันรู้ว่าคุณสามารถส่งไฟล์ที่ไม่ใช่ CSS ไปadd_editor_style()ได้ แต่ควรทำงานได้ดีแค่ดูรหัส ใช้เป็นจริงเป็นทางออกที่ดีกว่าในกรณีที่คุณต้องการที่จะขอในรูปแบบหลังจากที่เพิ่มผ่านmce_css add_editor_style()หนึ่งในเหตุผลดังกล่าวในชุดรูปแบบคือเนื่องจากมีการเพิ่ม URL แบบเต็มผ่านadd_editor_style()เอาต์พุตก่อนแม้ว่าจะมีการเพิ่มคำสั่งซื้อก็ตาม

— Justin Tadlock

10

WordPress มีmce_cssตัวกรองที่สามารถใช้เพื่อเพิ่มสไตล์ชีทที่กำหนดเองใน Visual Editor ตาม Codex:

ไฟล์สามารถเป็นไฟล์. php ซึ่งอนุญาตให้สร้างกฎ CSS แบบไดนามิกสำหรับตัวแก้ไขเนื้อหา

ตัวอย่างการเรียกตัวกรอง Codex ซึ่งแก้ไขสำหรับชุดรูปแบบ:

function wpse120831_mce_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= get_template_directory_uri() . '/dynamic-css.php';

    return $mce_css;
}

add_filter( 'mce_css', 'wpse120831_mce_css' );

— ชิปเบนเน็ตต์
แหล่งที่มา

Mr.Bennett เร็วขึ้นเพียงเพิ่มไปยังคำตอบของฉันด้านล่างเช่นกัน :) แต่แตกต่างกันเล็กน้อย

— ungestaltbar

@ungestaltbar เราใช้ตัวกรองสองแบบที่แตกต่างกันโดยสิ้นเชิง :)

— Chip Bennett

ด้วยผลลัพธ์เดียวกัน :)

— ungestaltbar

4

ฉันยอมรับโซลูชันข้างต้นโดย @ungestaltbar อย่างไรก็ตามฉันต้องการขยายคำตอบนี้เล็กน้อยด้วยโซลูชันที่ฉันใช้เพื่อให้คนอื่นเห็นวิธีการทำงาน

add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {

    add_editor_style(
        array(
            'editor-style.css',
            add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) ),
        )
    );
}

add_action( 'wp_ajax_my_editor_styles', 'my_editor_styles_callback' );
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );

function my_editor_styles_callback() {

    // @todo sanitize
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "a { color: #{$color_1}; }";

    die();
}

ฉันหวังว่ามันโอเคที่จะโพสต์คำตอบอื่นที่นี่เช่นนี้ ฉันไม่เห็นวิธีโพสต์สิ่งนี้ในการตอบกลับโดยตรงไปยังโซลูชันที่ฉันยอมรับ ฉันยังเรียนรู้วิธีใช้ WPSE

— Justin Tadlock
แหล่งที่มา

บางทีคุณควรเพิ่มadd_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );ถ้ามีการใช้ตัวแก้ไขในส่วนหน้า (สำหรับผู้ใช้ที่ไม่ได้เข้าสู่ระบบ)

— OriginalEXE

ใช่คำตอบที่มีการเปลี่ยนแปลง / ปรับแต่งที่สำคัญนั้นใช้ได้อย่างสมบูรณ์แบบ :) FYI ถ้ามันเป็นปัญหามากกว่าที่จะได้รับการแก้ไขในคำตอบเดิมแล้วส่งแก้ไขมันจะเป็นวิธีที่จะไป

— Rarst

@OriginalEXE - ใช่ ฉันจะอัปเดต

— Justin Tadlock

เพียงแค่เคล็ดลับสำหรับคนอื่นที่พบสิ่งนี้ในภายหลังฉันไม่สามารถทำให้มันทำงานได้อย่างถูกต้องตามที่แสดง ในที่สุดฉันก็พบว่าฉันต้องรวมข้อมูลส่วนหัวในการโทรกลับดังนั้นมันจึงถูกมองว่าเป็น CSS ส่วนหัว ("ชนิดเนื้อหา: ข้อความ / css; ชุดอักขระ: UTF-8"); ไม่แน่ใจว่านี่เป็นสิ่งที่แตกต่างใน. htaccess ของฉันหรือไม่

— SkyShab

4

ฉันอาจจะมาช้าไปงานปาร์ตี้นี้ แต่หลังจากใช้วิธีแก้ปัญหาข้างต้นแล้วฉันก็รู้ว่าความเร็วในการโหลดหน้าของบรรณาธิการนั้นพิการอย่างรุนแรง! เมื่อมองดูรหัสแล้วฉันก็รู้ว่ารหัสนั้นยังคงทำงานต่อไปหลังจาก TinyMCE.activeEditor ได้รับการเริ่มต้น รหัสใช้เมธอด setInterval () ซึ่งประเมินค่านิพจน์ตามช่วงเวลาที่กำหนดฉันเชื่อว่าเป็นเพราะคุณไม่สามารถกำหนดได้ว่าจะให้จุดใดในระหว่างการเรียกใช้รหัส "activeEditor" นี่คือสิ่งที่ทำให้หน้าเอกสารมีความเร็วลดลงถึงหัวเข่า

ทางออกที่ดีกว่าที่ฉันใช้ในการสร้างปลั๊กอินคือ

   /**
     * Extend TinyMCE config with a setup function.
     * See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit

     */
    function custom_tinymce_css($init) {

      $css = get_option('some_css'); 

     ?>

        <script type="text/javascript">            

            function addTempCSS( ed ) {
                ed.onInit.add( function() {
                    tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
                } );
            };
        </script>

        <?php
        if (wp_default_editor() == 'tinymce')
            $init['setup'] = 'addTempCSS';

        return $init;
    }
    add_filter('tiny_mce_before_init', 'custom_tinymce_css');

นี่คือตัวรับฟัง TinyMCE ดั้งเดิมที่ใช้ในการเรียกใช้รหัสหลังจากตัวแก้ไขที่ใช้งานอยู่จะเริ่มต้นได้ ฉันหวังว่านี่จะช่วยให้ใครบางคนที่นั่น ขอแสดงความนับถือ.

— Ayebare M
แหล่งที่มา

1

การทำงานสำหรับฉันนี้มีเพียงการเรียก API ที่เลิกใช้แล้วใน tinymce 4.0 คุณต้องเปลี่ยน ed.onInit.add (function () {... เป็น ed.on ('init', function () {...

— Mohammed

1

นี่เป็นวิธีแก้ไขที่โพสต์บนฟอรัม WordPress.org สำหรับคำถามนี้: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

วิธีนี้ใช้ได้ผลแน่นอน ฉันไม่ใช่ JS กูรูดังนั้นฉันจึงไม่แน่ใจว่านี่เป็นทางออกที่ดีที่สุดหรือไม่

add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

    $color_1 = get_theme_mod( 'color_1', 'cc4a00' ); ?>

    <script type="text/javascript">
    jQuery( document ).ready(

        function() {
            var my_style = 'a { color: #<?php echo $color_1; ?>; }';

            var checkInterval = setInterval(
                function() {

                    if ( 'undefined' !== typeof( tinyMCE ) ) {
                        if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {

                            jQuery( '#content_ifr' ).contents().find( 'head' ).append( '<style type="text/css">' + my_style + '</style>' );

                            clearInterval( checkInterval );
                        }
                    }
                }, 
                500 
            );
        }
    );
    </script>
<?php }

สามารถเพิ่มลงในไฟล์ JS ได้ คุณสามารถส่งผ่านตัวแปรได้อย่างง่ายดายผ่านwp_localize_script()สิ่งนั้น

— Justin Tadlock
แหล่งที่มา