WordPress打开TinyMCE编辑器隐藏按钮

昨天转载了一片文章《冰山一角,管窥中国互联网的地下世界》,由于转载,所以粘贴到编辑器的时候,样式排版什么的都很乱,我想先把内容粘贴过来,然后再自己调整一下。但我突然发现编辑器竟然没有选择字号大小的功能!!!我瞬间懵逼了 :surprised: ,好伐……

接下来就是各种百度、谷歌,于是就有了今天这篇博文。

WordPress默认编辑器为TinyMCE,它是一个简洁大方的编辑器,但WordPress默认隐藏了很多按钮,官方文档里有一些介绍:

为TinyMCE编辑器增加自定义按钮:http://codex.wordpress.org/TinyMCE_Custom_Buttons
为TinyMCE编辑器增加自定义样式:http://codex.wordpress.org/TinyMCE_Custom_Styles

因此,需要我们自己将隐藏的功能打开。当然,网上也有很多推荐的插件,如: TinyMCE  Advanced之类,网上很多,但我不太喜欢用插件,而且TinyMCE的常用功能就能满足我的需求。所以,只要在主题文件functions.php中增加了一些代码,就可以把想要的按钮加了上去,代码如下:

/** 
 * 为TinyMCE编辑器增加更多功能按钮
 */
function more_mce_buttons($buttons)
{
	$buttons[] = 'image';//图片
	$buttons[] = 'media';//视频等多媒体
	$buttons[] = 'code';//代码
	return $buttons;
}
add_filter('mce_buttons', 'more_mce_buttons');//添加到过滤器
//注意:
//mce_buttons 代表把按钮增加到第一行,下同
//mce_buttons_2 第二行
//mce_buttons_3 第三行

支持的按钮列表:

  1. 剪切(cut)复制(copy)粘贴(paste)撤销(undo)重做(redo)
  2. 左对齐(justifyleft)右对齐(justfyright)居中(justifycenter)两端对齐(justfyfull)
  3. 加粗(bold)斜体(italic)下划线(underline)删除线(strikethrough)清除格式(removeformat)
  4. 插入超链接(link)取消超链接(unlink)
  5. 锚文本(anchor)新建文本(newdocument)
  6. 字体颜色(forecolor)背景色(backcolor)
  7. 格式选择(formmatselect)字体选择(fontselect)字号选择(fontsizeselect)样式选择(styleselect)
  8. 无序列表(bullist)编号列表(numlist)
  9. 减少缩进(outdent)缩进(indent)
  10. 打开HTML代码编辑器(code)水平线(hr)清除冗余代码(cleanup)
  11. 上标(sub)下标(sup)特殊符号(charmap)
  12. 插入WP more标签(wp_more) 插入WP分页标签(wp_page)
  13. 隐藏按钮显示开关(wp_adv)隐藏按钮区起始部分(wp_adv_start)隐藏按钮区结束部分(wp_adv_end)帮助(wp_help)
  14. 插入图片(image)插入视频等多媒体(media)
  15. 拼写检查(spellchecker)

更多按钮可参阅TinyMCE官方文档:http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls
上述内容来源:http://blog.weixiaodeyu.com/wordpress-tinymce-more-buttons.html


值得注意的是,可能由于WordPress版本的不同,功能按钮的名称不一样。我的wordpress版本是4.4.1,左对齐(justifyleft)右对齐(justfyright)居中(justifycenter)两端对齐(justfyfull)在我的编辑器中是无法显示的,最终改为左对齐(alignleft)右对齐(alignright)居中(aligncenter)两端对齐(alignjustify)。这里也是经过一段曲折的,无法调用肯定是调用的名字不对,我在网上找了很多资料,都没找到正确的名字。但是最开始的编辑器是有这个图标的,于是我从原始的编辑器着手,按F12“审查元素”呗,然后有如下发现:

tinymce01

这种文字小图标呢,取名还是很规范的,统一前缀+命名,于是抱着试试又不怀孕的想法用alignleft试了一下,嘿,perfect~~~完美解决。 :wink:  :wink:  :wink:

下面贴上我的劳动成果:

tinymce02

完成之后,我又发现了一个小问题:这几个对齐按钮对图片无效,我的图片始终无法居中。找了半天,终于发现问题所在:当图片有父级元素时,给父级元素使用对齐效果时,图片是可以对齐的;当图片没有父元素时,对齐效果无效,但是会在图片的class中,添加一个类名(alignleft、alignright、aligncenter),于是我在主题文件style.css中添加如下代码:

/* Alignment */
.alignleft {
display: inline;
float: left;
margin-right:1rem;
}
.alignright {
display: inline;
float: right;
margin-left:1rem;
}
.aligncenter {
clear: both;
display: block;
margin:auto;
}

好了,这篇文章就到这儿了,写完收工、睡觉~

  1. Lena Matusik说道:

    Thank you for the good writeup. It in reality used to be a entertainment account it. Glance complex to more introduced agreeable from you! However, how can we communicate?

Comments are closed.