可以通过直接修改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'
]
如果表情过多的话,默认是不会有滚动条的,在FCKEditor里面可以找到弹出的页面,然后进行修改,CKEditor是显示一个层,默认是隐藏的,每个皮肤都对应不同的样式,如果我现在在使用v2的皮肤,就要先到ckeditor/skins/v2/目录下,找到dialog.css,这是压缩后的css文件,在里面找起来很不方便,可以先到源码下的目录,ckeditor/_source/skins/v2/,打开dialog.css,通过查看可以发现在cke_dialog_body的样式就是我们需要修改的,然后通过搜索在压缩文件里面找到相应的样式,加入:
overflow:auto;max-height:300px;
就可以了,我在只添加overflow之后,发现页面中还是把层的高度增大,而没有把页面的高度拉大,下面以图来说明问题.
不添加overflow和max-height样式:
可能会出现类似的溢出.也可能会这样显示不完整:
只添加overflow样式:
还是会显示不完整,而且也没有滚动条,我想的解释就是这个层还是把图片全都加进来了,但是层会随着浏览器的滚动条而改变Y坐标,所以后面的还是看不到.
全部加上后:
如果各位发现浏览器之间不兼容,还是需要找兼容性的样式.