WordPress CKEditor smiley表情图标定制化

WordPress默认的编辑器不是很好用,我习惯将它替换成CKEditor,安装CKEditor For WordPress即可。安装后编辑器将被替换,评论框的编辑器默认会被替换成CKEditor,有时候会导致模板样式错乱,可以在CKEditor->Basic Settings中禁用。

CKEditor默认的smiley表情不适合中国,我们可以将表情改造一下换成自己喜欢的表情,方法如下。

1. 下载你想要的表情包,一般是gif格式的图片,假设这些图片所在的文件夹叫mysmiley,将该文件夹拷贝到插件的表情目录中,路径为

wp-content/plugins/ckeditor-for-wordpress/ckeditor/plugins/smiley/images

2. 修改配置文件wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js

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

config.smiley_path=CKEDITOR.basePath+’plugins/smiley/images/mysmiley/’;

config.smiley_images=[‘1.gif’,’2.gif’];

第一行代码定义了表情文件所在的文件夹的路径,第二行是表情文件名字的数组。这样点击编辑器的表情按钮,自定义图标就会显示出来。

当你的图标过多时,由于显示不开会导致一部分图标无法显示,而且表情图标对话框没有滚动条,为了避免这种问题,我们可以修改一下css文件。找到wp-content/plugins/ckeditor-for-wordpress/ckeditor/skins/kama/dialog.css(假定你使用了默认的皮肤kama),在最后一行添加如下代码

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

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

下面是几个已经做好的表情包和大家分享一下,配置语句写在压缩包的readme.txt中

1. 洋葱头系列表情

下载地址:CKEditor洋葱头表情图标下载

2. qq表情图标

下载地址:CKEditor QQ表情