属性–名称/值对象，带有要应用于选定元素或新内联/块元素的属性mce_buttons_2.add_filter( \'mce_buttons_2\', \'fb_mce_editor_buttons\' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, \'styleselect\' );
return $buttons;
}
自定义样式，然后增强此按钮的下拉列表。通过阵列中的附加值进行增强也很有用，请参见codex 对于本例。/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( \'tiny_mce_before_init\', \'fb_mce_before_init\' );
function fb_mce_before_init( $settings ) {
// Set to true to include the default settings.
$settings[\'style_formats_merge\'] = true;
$style_formats = array(
array(
\'title\' => \'Download Link\',
\'selector\' => \'a\',
\'classes\' => \'download\'
),
array(
\'title\' => \'My Test\',
\'selector\' => \'p\',
\'classes\' => \'mytest\',
),
array(
\'title\' => \'AlertBox\',
\'block\' => \'div\',
\'classes\' => \'alert_box\',
\'wrapper\' => true
),
array(
\'title\' => \'Red Uppercase Text\',
\'inline\' => \'span\',
\'styles\' => array(
\'color\' => \'red\', // or hex value #ff0000
\'fontWeight\' => \'bold\',
\'textTransform\' => \'uppercase\'
)
)
);
$settings[\'style_formats\'] = json_encode( $style_formats );
return $settings;
}
结果
增强的下拉菜单
您还可以使用树菜单增强下拉菜单。从上面的示例源创建变量，数组中有更多结构，比如follow源。 $style_formats = array(
array(
\'title\' => \'Headers\',
\'items\' => array(
array(
\'title\' => \'Header 1\',
\'format\' => \'h1\',
\'icon\' => \'bold\'
),
array(
\'title\' => \'Header 2\',
\'format\' => \'h2\',
\'icon\' => \'bold\'
)
)
),
array(
\'title\' => \'Download Link\',
\'selector\' => \'a\',
\'classes\' => \'download\'
)
);
有关更多可能性和参数，请参见样式格式下拉字段的默认值（使用JavaScript编写）。
var defaultStyleFormats = [
{title: \'Headers\', items: [
{title: \'Header 1\', format: \'h1\'},
{title: \'Header 2\', format: \'h2\'},
{title: \'Header 3\', format: \'h3\'},
{title: \'Header 4\', format: \'h4\'},
{title: \'Header 5\', format: \'h5\'},
{title: \'Header 6\', format: \'h6\'}
]},
{title: \'Inline\', items: [
{title: \'Bold\', icon: \'bold\', format: \'bold\'},
{title: \'Italic\', icon: \'italic\', format: \'italic\'},
{title: \'Underline\', icon: \'underline\', format: \'underline\'},
{title: \'Strikethrough\', icon: \'strikethrough\', format: \'strikethrough\'},
{title: \'Superscript\', icon: \'superscript\', format: \'superscript\'},
{title: \'Subscript\', icon: \'subscript\', format: \'subscript\'},
{title: \'Code\', icon: \'code\', format: \'code\'}
]},
{title: \'Blocks\', items: [
{title: \'Paragraph\', format: \'p\'},
{title: \'Blockquote\', format: \'blockquote\'},
{title: \'Div\', format: \'div\'},
{title: \'Pre\', format: \'pre\'}
]},
{title: \'Alignment\', items: [
{title: \'Left\', icon: \'alignleft\', format: \'alignleft\'},
{title: \'Center\', icon: \'aligncenter\', format: \'aligncenter\'},
{title: \'Right\', icon: \'alignright\', format: \'alignright\'},
{title: \'Justify\', icon: \'alignjustify\', format: \'alignjustify\'}
]}
];
将自定义样式表添加到编辑器现在是最后一点，您可以通过钩子为这种格式包含自定义cssmce_css./**
* Apply styles to the visual editor
*/
add_filter( \'mce_css\', \'fb_mcekit_editor_style\');
function fb_mcekit_editor_style($url) {
if ( ! empty( $url ) )
$url .= \',\';
// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . \'/my-editor-styles.css\';
return $url;
}
不要忘记将此样式表规则也添加到前端样式表中。删除格式按钮作为增强功能，您可以删除formatselect 通过检查按钮数组中的值下拉按钮。将follow源添加到函数fb_mce_editor_buttons 在挂钩处mce_buttons_2.
$value = array_search( \'formatselect\', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( \'formatselect\' === $value )
unset( $buttons[$key] );
}
}
