问题描述
在 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，我只看到标准段落格式下拉列表
以及标准样式格式下拉菜单：
到目前为止，我还没有找到任何文件，如果有任何钩子已更改更新 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');
最佳解决方案
如果您查看 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 按钮已添加到 class-wp-editor.php 中的 mce_buttons_2 。然后我跟踪到 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' );
小注意事项：我不知道在哪里添加 drop-down 项目本身的样式。在 TinyMCE 样品中，”Red Headline” 选项为红色。我无法理解这一点。如果你这样做，请让我知道。
参考文献
注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。