最近因为网站新增了读书笔记这一模块,而在编辑相关文章的时候需要使用一些中文字体,TinyMCE编辑器默认是没有字体选项及中文字体的,当然我所使用的DUX主题到是有字体选项,可惜没有中文字体,无奈只能自己添加。从网上搜了些代码并简要对比整理了下,最终在后台添加上了中文字体,以下是具体代码。

添加中文字体

将以下代码添加到主题的 function.php 文件中,这段代码有点不好的地方是会重置后台字体,如果你需要保留自带的字体可以记下字体的名字按照相同的格式添加上即可。

//TinyMCE编辑器添加自定义字体
function qgg_customize_font_family($initArray){ 
    $initArray['font_formats'] = "Arial='Arial',Helvetica,Arial,sans-serif;Times New Roman='Times New Roman',Helvetica,Arial,sans-serif;宋体='宋体',Helvetica,Arial,sans-serif;楷体='楷体',Helvetica,Arial,sans-serif;黑体='黑体',Helvetica,Arial,sans-serif;隶书='隶书',Helvetica,Arial,sans-serif"; 
    return $initArray;
}
add_filter('tiny_mce_before_init', 'qgg_customize_font_family')

添加字体选项

对于一些默认的主题,后台编辑器可能没有字体相关的选项,添加下面的代码即可为后台编辑器添加字体相关的选项。

function qgg_add_editor_buttons($buttons) {
    $buttons[] = 'fontselect';
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'cleanup';
    $buttons[] = 'styleselect';
    $buttons[] = 'del';
    $buttons[] = 'sub';
    $buttons[] = 'sup';
    $buttons[] = 'copy';
    $buttons[] = 'paste';
    $buttons[] = 'cut';
    $buttons[] = 'image';
    $buttons[] = 'anchor';
    $buttons[] = 'backcolor';
    $buttons[] = 'wp_page';
    $buttons[] = 'charmap';
    return $buttons;
}
add_filter("mce_buttons_2", "qgg_add_editor_buttons");

注意:上面代码中mce_buttons_2不可更改,具体原因可查看官方文档