如何在WP3.9中自定义TinyMCE4-旧的样式和格式方法不再起作用

时间:2014-04-17 作者:rkoller

在WP 3.9之前,我在函数中应用了以下两个过滤器。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,而“自定义样式”下拉列表显示“页眉粗细”、“页眉klein”等。但不幸的是,wp和tinymce不再麻烦了,因为wp 3.9,我现在只看到标准段落格式下拉列表

paragraph

以及“标准样式格式”下拉列表:

styles

到目前为止,我还没有找到任何关于tinymce 4的更新是否改变了挂钩的文档。有人知道吗?向拉尔夫致意

更新:好的,根据更多的研究和下面的评论,我想我已经找到了答案:

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

1 个回复
最合适的回答,由SO网友:helgatheviking 整理而成

如果你进去看看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.

EDIT 将其保留在适当位置,但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\');
请记住,这是完全未经测试的,因此您的里程数可能会有所不同。(在测试之前不要在生产站点上使用)。

Continuing onwards

深入挖掘这些格式似乎是一个自定义的tinyMCE按钮。你可以看到formatselect 按钮添加到mce_buttons_2class-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 并添加您自己的自定义版本。

Tested and working

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示例中,“红色标题”选项为红色。我想不出来。如果你愿意,请告诉我。

结束