填写您的邮件地址,订阅我们的精彩内容:

WordPress 4之后TinyMCE4中TinyMCE_Custom_Styles如何增加自己的样式

以前使用的样式已经不能再用了,TinyMCE4之后TinyMCE_Custom_Styles做了调整,虽然官方文档中仍然有按照以前的方法进行配置,但是实验后失败,因此要使用新的方法。具体代码如下:

// 修改编辑器原有的一些配置 // http://codex.wordpress.org/TinyMCE_Custom_Styles
function wp_admin_editor_init_options($settings) {
? // 定义自己的样式
? $version = get_bloginfo('version');
? if($version >= 4) :
??? $style_formates = array();//json_decode($settings['style_formats'],true);
??? $style_formates[] = array( ?
??????? 'title' => 'code', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'code',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'block', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'block',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'floatleft', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'floatleft',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'floatright', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'floatright',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'aligncenter', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'aligncenter',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'warn', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'warn',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'clear', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'clear',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'line', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'line',
??????? 'wrapper' => true,
????? );
??? $style_formates[] = array( ?
??????? 'title' => 'hidden', ?
??????? 'inline' => 'span', ?
??????? 'classes' => 'hidden',
??????? 'wrapper' => true,
????? );
??? //$style_formates = array_merge($style_formates,$append_formats);
??? // Insert the array, JSON ENCODED, into 'style_formats'
??? $settings['style_formats'] = json_encode( $style_formates ); ?
? else :
??? $settings['theme_advanced_styles'] .= 'code=code;block=block;floatleft=floatleft;floatright=floatright;aligncenter=aligncenter;warn=warn;clear=clear;line=line;hidden=hidden';
? endif;
?? ?// 检查中文拼写
?? ?$settings['spellchecker_languages'] .= '+Chinese=zh,English=en';
?? ?return $settings;
}
add_filter('tiny_mce_before_init','wp_admin_editor_init_options');

最终效果如下:

2014-10-26-180137

参考:http://codex.wordpress.org/TinyMCE_Custom_Styles

下面我简单说几句