博文中心

WordPress TinyMCE编辑器 究极进化之路

作者: 分类: 发布于:2019.09.26

WordPress虽然更新了古藤堡编辑器,但我还是喜欢原来的编辑器,如果能让编辑器非常适合自己,那就再好不过了。总结一下定制WordPress TinyMCE编辑器的方法。

WordPress中编辑器相关的Filters

  • mce_spellchecker_languages: 更改spell checker的语言.
  • mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4: 更改TinyMCE编辑器的按钮
  • mce_css: 编辑器样式表的文件路径
  • mce_external_plugins: 编辑器插件
  • mce_external_languages: 外部插件加载的语言文件,允许它们使用标准翻译方法
  • tiny_mce_before_init: 可以更改所有的初始化选项

增加自定义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');

如何重排或添加按钮

使用filter增加按钮,按钮一共可以有四排,从第一排到第四排对应的钩子分别为:

  • mce_buttons
  • mce_buttons_2
  • mce_buttons_3
  • mce_buttons_4

例如,向第二排开头增加选择Font FamilyFont Size的按钮

add_filter('mce_buttons_2', 'add_mce_buttons');
function add_mce_buttons( $buttons ){
array_unshift( $buttons,'fontselect','fontsizeselect' );
return $buttons;
}

如果要添加到末尾,使用array_push()函数操作数组。

WordPress中可用的按钮名称(包括默认显示的和隐藏的)如下表所示

英文名称 中文对照

默认显示的按钮

bold
粗体
italic
斜体
underline
下划线
strikethrough
删除线
justifyleft
左对齐
justifycenter
居中
justifyright
右对齐
justifyfull
两端对齐
bullist
无序列表(非序号式列表)
numlist
有序列表(序号式列表)
outdent
减小缩进量
indent
增加缩进量
undo
撤销
redo
重做
link
插入或编辑链接
unlink
取消链接
wp_more
插入“更多”分隔标签
spellchecker
切换拼写检查器状态
fullscreen
切换全屏模式
wp_adv
显示/隐藏高级功能
formatselect
选择格式
forecolor
选择文字颜色
pastetext
以纯文本粘贴
pasteword
从Word中粘贴
removeformat
去除格式
charmap
插入自定义字符
wp_help
帮助
blockquote
引用

隐藏的按钮

cut
剪切
copy
复制
paste
粘贴
image
插入或编辑图像
fontselect
选择字体
fontsizeselect
选择字号
styleselect
选择样式
sub
下标
sup
上标
backcolor
选择背景色
forecolorpicker
选择文字颜色(拾色器)
backcolorpicker
选择背景颜色(拾色器)
visualaid
显示/隐藏指导线和不可见元素
anchor
插入或编辑锚
newdocument
新文档(清除当前内容)
cleanup
清理无用代码
code
编辑HTML源码
selectall
全选

2 4
版权声明:
WordPress TinyMCE编辑器 究极进化之路 _ 引力博客 系本站原创,由 编辑发表 ,转载请注明出处。
本文链接:
我要评论
最新评论
44