WP笔记

WordPress 3.9 TinyMCE定制方法

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. Pingback: 如何让TinyMCE Advanced编辑器去除换行增加的P标签 | 迅捷互动网络工作室
    1. 抱歉没研究过文本模式。
      但文本模式跟tinymce关系不大,是wordpress自己的,你可以看下http://codex.wordpress.org/Quicktags_API

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

评论已关闭。