วิธีปรับแต่ง TinyMCE4 ใน WP 3.9 - วิธีเก่าสำหรับสไตล์และรูปแบบไม่ทำงานอีกต่อไป

ก่อน WP 3.9 ฉันมีตัวกรองสองตัวต่อไปนี้ที่ใช้ใน functions.php:

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

เพื่อให้ดร็อปดาวน์รูปแบบย่อหน้าแสดงเฉพาะ p, h3 และ h4 ในขณะที่ดรอปดาวน์ของสไตล์ที่กำหนดเองแสดง "Header gross", "Header klein" และอื่น ๆ แต่น่าเสียดายที่ wp และ tinymce ไม่ต้องกังวลอีกต่อไปตั้งแต่ WP 3.9 ฉันเห็นเฉพาะรูปแบบย่อหน้าแบบเลื่อนลงในขณะนี้

เช่นเดียวกับดร็อปดาวน์รูปแบบสไตล์มาตรฐาน:

จนถึงตอนนี้ฉันยังไม่พบเอกสารใด ๆ หากมีการเปลี่ยนแปลง hooks ที่มีการอัปเดตเป็น tinymce 4. มีใครรู้บ้าง ขอแสดงความนับถือ Ralf

อัปเดต: โอเคอ้างอิงจากการวิจัยเพิ่มเติมอีกเล็กน้อยและความคิดเห็นที่อยู่ด้านล่างฉันคิดว่าฉันเข้าใจสิ่งต่าง ๆ แล้ว:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

หากคุณมองเข้าไปclass-wp-editor.phpคุณจะพบว่าตัวกรองที่คุณใช้อยู่นั้นยังคงอยู่ แต่การตั้งค่าจะแตกต่างกัน

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

ฉันคาดเดา formatsแต่ฉันคิดว่าคุณจำเป็นต้องเปลี่ยนคีย์อาร์เรย์ที่คุณกำหนดเป้าหมายที่จะ

แก้ไขออกจากสถานที่นี้ แต่ OP ยืนยันว่าสิ่งนี้ไม่ได้ทำในสิ่งที่เขาพยายาม

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

โปรดทราบว่านี่ไม่ได้ทดสอบทั้งหมดดังนั้นระยะของคุณอาจแตกต่างกันไป (และอย่าใช้ในไซต์การผลิตจนกว่าคุณจะทดสอบ)

อย่างต่อเนื่องเป็นต้นไป

การขุดลึกยิ่งรูปแบบดูเหมือนจะเป็นปุ่ม TinyMCE ที่กำหนดเอง คุณจะเห็นว่าformatselectปุ่มจะถูกเพิ่มเข้าไปในmce_buttons_2 class-wp-editor.phpจากนั้นฉันก็ติดตามสิ่งนั้นไปที่tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

ด้วยสิ่งที่อยู่ในใจฉันคิดว่าเป้าหมายใหม่จะเป็น 1 (เป็นการดีที่สุด) เปลี่ยนeditor.settings.block_formatsหรือ 2 ลบปุ่มนั้นโดยการกรองmce_buttons_2และเพิ่มเวอร์ชันที่คุณกำหนดเอง

ผ่านการทดสอบและทำงาน

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

    $style_formats = array (
        array( 'title' => 'Bold text', 'inline' => 'b' ),
        array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),
        array( 'title' => 'Red header', 'block' => 'h1', 'styles' => array( 'color' => '#ff0000' ) ),
        array( 'title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1' ),
        array( 'title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2' )
    );

    $init['style_formats'] = json_encode( $style_formats );

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

ข้อแม้เล็ก ๆ : ฉันไม่แน่ใจว่าจะเพิ่มสไตล์สำหรับรายการแบบหล่นลงด้วยตนเองได้ที่ใด ในตัวอย่าง TinyMCE ตัวเลือก "Red Headline" จะเป็นสีแดง ฉันไม่สามารถเข้าใจได้ หากคุณโปรดแจ้งให้เราทราบ