CKEditor添加表情

首先，查看CKEditor是否已安装表情插件，没有请到 http://ckeditor.com/addon/smiley 下载安装，

安装方法：解压，smiley文件夹放到ckeditor\plugins目录下，接下来配置cinfig.js文件，查看插件文档或以下内容

config.extraPlugins = 'smiley';

引入表情插件

可以通过直接修改CKEditor的config.js文件来配置CKEditor,官方提供了很详细的API.

config.smiley_columns = 8

指定表情的显示的列数,默认为8.

表情图片的默认地址在ckeditor/plugins/smiley/images/目录下,可以直接放进来,也可以用CKEDITOR.config.smiley_path属性指定图片的地址.

把要使用到的图片用config.smiley_images属性指定名称,比如把名称为1到5的gif格式的图片纳入CKEditor:

config.smiley_images = [

        '0.gif','1.gif','2.gif','3.gif','4.gif','5.gif'

    ]

鼠标指上去后显示的提示用config.smiley_descriptions属性指定,比如:

config.smiley_descriptions = [

    '0','1','2','3','4','5'

]

如果表情过多的话,默认是不会有滚动条的,找到"\ckeditor\plugins\smiley\dialogs\smiley.js"

找到

var html = [
		'<div>' +
		'<span id="' + labelId + '" class="cke_voice_label">' + lang.options + '</span>',
		'<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%;border-collapse:separate;" cellspacing="2" cellpadding="2"',
		CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',
		'><tbody>'
	];

把第二行的'<div>'+改成

'<div style="max-height:350px;overflow:auto;width: 100%;  border-collapse: separate;">' +

max-height的值可以自己调节