Cách tùy chỉnh TinyMCE4 trong WP 3.9 - cách cũ cho kiểu và định dạng không hoạt động nữa

Trước WP 3.9 tôi đã có hai bộ lọc sau được áp dụng trong hàm.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');

sao cho danh sách thả xuống định dạng đoạn chỉ hiển thị p, h3 và h4 trong khi thả xuống kiểu tùy chỉnh hiển thị "Header Gross", "Header klein", v.v. Nhưng thật không may, wp và tinymce không làm phiền nữa kể từ wp 3.9, bây giờ tôi chỉ thấy các định dạng đoạn tiêu chuẩn thả xuống

cũng như thả xuống định dạng kiểu chuẩn:

Cho đến nay tôi không tìm thấy bất kỳ tài liệu nào về việc liệu có bất kỳ hook nào đã thay đổi với bản cập nhật thành tinymce 4. Có ai biết không? Trân trọng Ralf

Cập nhật: Ok dựa trên một ít nghiên cứu và những bình luận bên dưới tôi đoán tôi đã tìm ra mọi thứ:

//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');

Nếu bạn nhìn vào, class-wp-editor.phpbạn sẽ thấy rằng bộ lọc bạn đang sử dụng vẫn còn đó, tuy nhiên các cài đặt khác nhau.

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 ),
                );

Tôi đoán, nhưng tôi nghĩ bạn cần thay đổi khóa mảng bạn đang nhắm mục tiêu formats.

EDIT Để lại điều này tại chỗ, nhưng OP xác nhận rằng điều này không làm những gì anh ta đang cố gắng.

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');

Hãy nhớ rằng điều này là hoàn toàn chưa được kiểm tra, vì vậy số dặm của bạn có thể thay đổi. (Và không sử dụng trên một trang web sản xuất cho đến khi bạn đã thử nghiệm nó).

Tiếp tục trở đi

Đào sâu hơn các định dạng dường như là một nút tinyMCE tùy chỉnh. Bạn có thể thấy rằng formatselectnút được thêm vào mce_buttons_2trong class-wp-editor.php. Và sau đó tôi theo dõi nó để 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'
        );

Với ý nghĩ đó, tôi nghĩ mục tiêu mới sẽ là 1. (lý tưởng) thay đổi editor.settings.block_formatshoặc 2. loại bỏ nút đó bằng cách lọc mce_buttons_2và thêm phiên bản tùy chỉnh của riêng bạn.

Đã kiểm tra và làm việc

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' );

Thông báo trước : Tôi không chắc chắn nơi để thêm kiểu cho các mục thả xuống. Trong mẫu TinyMCE, tùy chọn "Red Headline" có màu đỏ. Tôi không thể tìm ra điều này. Nếu bạn làm xin vui lòng cho tôi biết.