WordPress 3.9使用TinyMCE 4.0版,钩子没怎么变,但tinymce 4.0本身有变化,所以与低于3.9的TinyMCE定制方法略有不同。本文列举几个常用的例子,文中所用代码添加到主题的functions.php中即可。

增加自定义Font Family

假设主题使用clear sans字体,通过fontface generator生成字体文件后,将字体集成到Tinymce中,代码如下

function customize_font_family($initArray){
   $initArray['font_formats'] = "ClearSans='clear_sansregular',Helvetica,Arial,sans-serif;ClearSans Medium='clear_sans_mediumregula',Helvetica,Arial,sans-serif;ClearSans Light='clear_sans_lightregular',Helvetica,Arial,sans-serif;ClearSans Thin='clear_sans_thinregular',Helvetica,Arial,sans-serif";
   return $initArray;
}
add_filter('tiny_mce_before_init', 'customize_font_family');

修改字号

function customize_text_sizes($initArray){   
   $initArray['fontsize_formats'] = "14px 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 25px 26px 27px 28px 29px 30px 32px 48px";   
   return $initArray;
}
add_filter('tiny_mce_before_init', 'customize_text_sizes');

增加自定义文字颜色

function customize_text_color($initArray){
   $default_colours = '
    "000000", "Black",        "993300", "Burnt orange", "333300", "Dark olive",   "003300", "Dark green",   "003366", "Dark azure",   "000080", "Navy Blue",      "333399", "Indigo",       "333333", "Very dark gray", 
    "800000", "Maroon",       "FF6600", "Orange",       "808000", "Olive",        "008000", "Green",        "008080", "Teal",         "0000FF", "Blue",           "666699", "Grayish blue", "808080", "Gray", 
    "FF0000", "Red",          "FF9900", "Amber",        "99CC00", "Yellow green", "339966", "Sea green",    "33CCCC", "Turquoise",    "3366FF", "Royal blue",     "800080", "Purple",       "999999", "Medium gray", 
    "FF00FF", "Magenta",      "FFCC00", "Gold",         "FFFF00", "Yellow",       "00FF00", "Lime",         "00FFFF", "Aqua",         "00CCFF", "Sky blue",       "993366", "Brown",        "C0C0C0", "Silver", 
    "FF99CC", "Pink",         "FFCC99", "Peach",        "FFFF99", "Light yellow", "CCFFCC", "Pale green",   "CCFFFF", "Pale cyan",    "99CCFF", "Light sky blue", "CC99FF", "Plum",         "FFFFFF", "White"
';
$custom_colours = '
    "898989", "#898989", "666565", "#666565"
';
$initArray['textcolor_map'] = '['.$custom_colours.','.$default_colours.']'; // build colour grid default+custom colors
$initArray['textcolor_rows'] = 6; // enable 6th row for custom colours in grid

   return $initArray;
}
add_filter('tiny_mce_before_init', 'customize_text_color');

本段代码摘自:http://stackoverflow.com/questions/23171247/add-custom-text-color-wordpress-3-9-tinymce-4-visual-editor

开启隐藏按钮(如本文提到的font family,font size)的方法没变化。

用tiny_mce_before_init钩子定制TinyMCE,额外的参数请参考TinyMCE 4.0 API

http://www.tinymce.com/wiki.php/Configuration

5条留言

  1. 发现这段代码只对可视化模式有用,文本模式该怎么写钩子?

    1. 抱歉没研究过文本模式。
      但文本模式跟tinymce关系不大,是wordpress自己的,你可以看下http://codex.wordpress.org/Quicktags_API

  2. 其实装个强化插件就ok了,比这个功能多,或者直接换强化的编辑器

评论功能已关闭