WP笔记

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定义对话框的高度,可以根据自己的需要写。这样表情多时会出现滚动条,就可以正常使用了。如果你的表情很少,就不要做这个改动,不然显示会出问题。

更正

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控制边框高度,请根据具体情况调整高度值

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

洋葱头系列表情下载

 

下载地址:[download id=6]

qq表情图标下载

下载地址:[download id=7]

潘斯特表情图标下载

下载地址:[download id=8]

24条评论

  1. 我之前也是用的这个,现在我用的是Kindeditor For Wordpress这个编辑器,自带了代码高亮!

    1. Kindeditor For WordPress挺好的,要是使用的人多一点就好了,很多插件主题扩展编辑器按钮都不会考虑这个插件,ckeditor还好点,但也好多扩展没有。现在倒觉得用wp默认的编辑器最舒服,我挺喜欢默认编辑器带的那个插入相关链接的功能,只有默认的有,连ckeditor都没有

  2. Pingback: 我思故我在 » 我的独立博客
  3. 貌似又可以了,刚才好像估计是后台没更新。多谢了,在网上找了很多貌似就你的管用,

  4. 你好,我问下我按照你的方法做了为什么表情栏里 还是原先默认的呢?

    1. 你下的哪个?潘斯特的那个表情太多需要处理下,方法文章里写了:

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

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

      不知道你用什么浏览器,ckeditor版本多少

      1. 我就是按照你写的这个操作的啊,表情是我自己的,不是下的你的,但是没有出现滚动条啊,图标都显示到框子外面了。

        1. 你写overflow:auto这个属性了吗,我当时的情况是,如果图标太多了,宽度一定,超出的部分就看不到了,我倒是没遇到过图标显示到框子外面的情况,这问题只能具体情况具体分析。

      1. 咨询你个问题,就是我上传了42个表情嘛,为什么插入到文章之后鼠标指到前几个的时候还是有字提示的,smiley sad什么的,怎么去掉?

        1. 修改wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js
          定义好config.smiley_images后再将描述每个图标的文字数组清空即可,添加如下代码
          config.smiley_descriptions=[”];

          ckeditor默认描述如下
          config.smiley_descriptions =
          [
          ‘smiley’, ‘sad’, ‘wink’, ‘laugh’, ‘frown’, ‘cheeky’, ‘blush’, ‘surprise’,
          ‘indecision’, ‘angry’, ‘angel’, ‘cool’, ‘devil’, ‘crying’, ‘enlightened’, ‘no’,
          ‘yes’, ‘heart’, ‘broken heart’, ‘kiss’, ‘mail’
          ];
          这就是你看到的smiley、sad。。。是该改一下这个,多谢提醒!

        2. 哦哦哦,没事,不好意思,刚才可能有代码被不小心删掉了,已解决,谢谢啊!

评论已关闭。