WordPress 默认的TinyMCE编辑器不是很好用，其编辑界面如下图：

更多参考：为WordPress默认编辑器TinyMCE增加额外的按钮

 

米扑博客将它替换成 CKEditor for WordPress

官网：https://wordpress.org/plugins/ckeditor-for-wordpress/

下载：ckeditor-for-wordpress.zip

安装后编辑器将被替换，评论框的编辑器默认会被替换成CKEditor，

设置为评论框时，有时候会导致模板样式错乱，可以在CKEditor->Basic Settings中禁用。

 

WordPress CKEditor 表情工具栏定制

CKEditor默认的smiley表情不适合中国，米扑博客将表情改造换成了自己喜欢的表情，先看效果图

基本包括了smiley、qq经典表情、qq方脸表情、动态字符表情、WP自带表情等，

不够的大家看完本文后，可自己添加，非常简单

 

定制表情方法如下：

1. 下载表情包

米扑博客已经整理好了，花了大半天时间搞，希望网友看到用到米扑博客整理后的表情后，能为米扑博客留言点个赞

smilies-mimvp.tar.gz

解压后，

tar zxvf smilies-mimvp.tar.gz

进入 ckeditor-for-wordpress 插件目录：

cd  wp-content/plugins/ckeditor-for-wordpress/

放入 ckeditor-for-wordpress/ckeditor/plugins/smiley/images/ 目录下

即目录： ckeditor-for-wordpress/ckeditor/plugins/smiley/images/smilies-mimvp

 

2. 修改配置文件

1）修改配置文件 ckeditor.config.js

vim ckeditor-for-wordpress/ckeditor.config.js

在CKEDITOR.editorConfig = function(config) { … }中添加如下代码 

// add by mimvp.com 
config.smiley_path=CKEDITOR.basePath+'plugins/smiley/images/smilies-mimvp/';
config.smiley_columns = 16;    // 每行16个表情
config.smiley_images=[    
	'sys_angel_smile.gif','sys_angry_smile.gif','sys_broken_heart.gif','sys_confused_smile.gif','sys_cry_smile.gif','sys_devil_smile.gif','sys_embaressed_smile.gif','sys_embarrassed_smile.gif','sys_envelope.gif','sys_heart.gif','sys_kiss.gif','sys_lightbulb.gif','sys_omg_smile.gif','sys_regular_smile.gif','sys_sad_smile.gif','sys_shades_smile.gif','sys_teeth_smile.gif','sys_thumbs_down.gif','sys_thumbs_up.gif','sys_tongue_smile.gif','sys_tounge_smile.gif','sys_whatchutalkingabout_smile.gif','sys_wink_smile.gif', 

	'qq_arrow.gif','qq_biggrin.gif','qq_confused.gif','qq_cool.gif','qq_cry.gif','qq_eek.gif','qq_evil.gif','qq_exclaim.gif','qq_idea.gif','qq_lol.gif','qq_mad.gif','qq_mrgreen.gif','qq_neutral.gif','qq_question.gif','qq_razz.gif','qq_redface.gif','qq_rolleyes.gif','qq_sad.gif','qq_smile.gif','qq_surprised.gif','qq_twisted.gif','qq_wink.gif',

	'fang_arrow.gif','fang_biggrin.gif','fang_confused.gif','fang_cool.gif','fang_cry.gif','fang_eek.gif','fang_evil.gif','fang_exclaim.gif','fang_idea.gif','fang_lol.gif','fang_mad.gif','fang_mrgreen.gif','fang_neutral.gif','fang_question.gif','fang_razz.gif','fang_redface.gif','fang_rolleyes.gif','fang_sad.gif','fang_smile.gif','fang_surprised.gif','fang_twisted.gif','fang_wink.gif',

	'symbol_biggrin.gif','symbol_confused.gif','symbol_cool.gif','symbol_cry.gif','symbol_eek.gif','symbol_lol.gif','symbol_mad.gif','symbol_neutral.gif','symbol_question.gif','symbol_razz.gif','symbol_redface.gif','symbol_rolleyes.gif','symbol_sad.gif','symbol_smile.gif','symbol_surprised.gif','symbol_wink.gif',

	'sola_cool.gif','sola_cry.gif','sola_embarassed.gif','sola_foot-in-mouth.gif','sola_frown.gif','sola_innocent.gif','sola_kiss.gif','sola_laughing.gif','sola_money-mouth.gif','sola_sealed.gif','sola_smile.gif','sola_surprised.gif','sola_tongue-out.gif','sola_undecided.gif','sola_wink.gif','sola_yell.gif',

	'wp_arrow.gif','wp_biggrin.gif','wp_confused.gif','wp_cool.gif','wp_cry.gif','wp_eek.gif','wp_evil.gif','wp_exclaim.gif','wp_idea.gif','wp_lol.gif','wp_mad.gif','wp_mrgreen.gif','wp_neutral.gif','wp_question.gif','wp_razz.gif','wp_redface.gif','wp_rolleyes.gif','wp_sad.gif','wp_smile.gif','wp_surprised.gif','wp_twisted.gif','wp_wink.gif',
];

第一行代码定义了表情文件所在的文件夹的路径，

第二行代码定义了每行显示表情的个数，推荐16-20个

第三行是表情文件名字的数组，即上面米扑博客整理好的表情包

这样点击编辑器的表情按钮，自定义图标就会显示出来，如上面的米扑博客效果图

 

3. CSS样式调整（可选）

当你的表情图标过多时，会导致一部分图标无法显示，而且表情图标对话框没有滚动条，

为了避免这种问题，我们可以修改css文件，假定你使用了默认的皮肤kama

vim wp-content/plugins/ckeditor-for-wordpress/ckeditor/skins/kama/dialog.css

在最后一行添加如下代码

.cke_dialog_ui_html{height:350px;overflow:auto;}

这个文件是经过压缩的，所以添加代码时注意不要有空格。height定义对话框的高度，可以根据自己的需要写。这样表情多时会出现滚动条，就可以正常使用了。如果你的表情很少，就不要做这个改动，不然显示会出问题。

 

改进版：

ckeditor for wordpress plugin升级了几次后这个方法不太好使了，这里介绍一种更省事的方法

编辑当前主题的functions.php文件，加入如下代码 

function change_editor_style(){
	echo "
		<style type='text/css'>
		.cke_dialog_ui_html{max-height:300px !important; width:100% !important; overflow-y:auto; overflow-x:hidden;}
		.cke_dialog_contents{height:auto !important}
		</style>
	";
}
add_action("admin_print_styles", "change_editor_style");

height控制边框高度，请根据具体情况调整高度值

 

好了，保存后，强制刷新缓存，查看 CKEditor 工具栏的表情，是不是看到了米扑博客的表情图啦

恩， 如果自己想添加表情，只需要走三步：

1） 把表情保存到 ckeditor-for-wordpress/ckeditor/plugins/smiley/images/smilies-mimvp/ 目录下，名字不要重复，最好用前缀

2） 把表情名，写入配置文件中 ckeditor-for-wordpress/ckeditor.config.js

3） 强制刷新缓存，查看 CKEditor 工具栏的表情

 

 

参考推荐：

WordPress 编辑器插件CKEditor

WordPress 代码实现评论表情功能

WordPress 评论框添加表情、加粗、斜体、引用、代码、图片等功能

20款JQuery文件上传插件及示例

WordPress 代码高亮插件SyntaxHighlighter使用详解

WordPress 视频嵌入iframe自适应手机的初步解决方案