定制CKEditor的表情
来源：互联网 发布：sam软件 编辑：程序博客网 时间：2024/05/01 11:23
IT程序员开发必备-各类资源下载清单，史上最全IT资源，个人收藏总结！
1.将图片源放入/ckeditor目录下，这里是/ckeditor/plugins/smiley/images文件下
2.在page页面下写
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1',{ //去掉左下角的body和p标签 removePlugins : 'elementspath', //皮肤 skin : 'v2', //加入中文 font_names : '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;' + CKEDITOR.config.font_names, //设置编辑器里字体下拉列表里的字体 //设置工具栏里面的工具 最主要的 toolbar : [['Font','Bold','Italic','Underline','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft', 'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Smiley','Table', 'RemoveFormat','syntaxhighlight' ]], //表情显示每行个数 ,默认为8个 smiley_columns : 8, //表情图片源 ，CKEDITOR.basePath指http://localhost:8080/FCKeditor/ckeditor smiley_path : CKEDITOR.basePath+ 'plugins/smiley/images/wangwang/', smiley_images : [ '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif', '11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif', '21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif', '31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif', '41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif', '51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif'], // 鼠标指上去后显示的提示用config.smiley_descriptions属性指定, smiley_description : [ '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif', '11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif', '21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif', '31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif', '41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif', '51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif'] }); 或将其写入js文件 mysmiley.js CKEDITOR.editorConfig = function( config ) { config.smiley_columns = 8; config.smiley_path = CKEDITOR.basePath+ 'plugins/smiley/images/wangwang/'; config.smiley_images = [ '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif', '11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif', '21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif', '31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif', '41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif', '51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif']; config. smiley_description = [ '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif', '11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif', '21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif', '31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif', '41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif', '51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif']; }; 然后在smile.html<script type="text/javascript"> CKEDITOR.replace( 'editor1',{ //去掉左下角的body和p标签 removePlugins : 'elementspath', //皮肤 skin : 'v2', //加入中文 font_names : '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;' + CKEDITOR.config.font_names, //设置编辑器里字体下拉列表里的字体 //设置工具栏里面的工具 最主要的 toolbar : [['Font','Bold','Italic','Underline','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft', 'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Smiley','Table', 'RemoveFormat','syntaxhighlight' ]], customConfig : '../ckeditor/custom/mysmiley.js' }); //CKEDITOR.replace( 'editor1'); </script> 3.如果表情过多的话,默认是不会有滚动条的,在FCKEditor里面可以找到弹出的页面,然后进行修改,CKEditor是显示一个层,默认是隐藏的,每个皮肤都对应不同的样式,如果我现在在使用v2的皮肤,就要先到ckeditor/skins/v2/目录下,找到dialog.css,这是压缩后的css文件,在里面找起来很不方便,可以先到源码下的目录,ckeditor/_source/skins/v2/,打开dialog.css,通过查看可以发现在cke_dialog_body的样式就是我们需要修改的,然后通过搜索在压缩文件里面找到相应的样式,加入:.cke_skin_v2 .cke_dialog_body{ margin-left:16px;margin-right:16px;margin-top:2px;margin-bottom:20px;z-index:1;_position:static; overflow:auto;max-height:300px;}4.效果如下:
例子程序:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>smiley.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../ckeditor/ckeditor.js"></script> </head> <body> 显示自定义表情的页面<br> <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1',{ //去掉左下角的body和p标签 removePlugins : 'elementspath', //皮肤 skin : 'v2', //加入中文 font_names : '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;' + CKEDITOR.config.font_names, //设置编辑器里字体下拉列表里的字体 //设置工具栏里面的工具 最主要的 toolbar : [['Font','Bold','Italic','Underline','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft', 'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Smiley','Table', 'RemoveFormat','syntaxhighlight' ]], //表情显示每行个数 ,默认为8个 smiley_columns : 8, //表情图片源 ，CKEDITOR.basePath指http://localhost:8080/FCKeditor/ckeditor smiley_path : CKEDITOR.basePath+ 'plugins/smiley/images/wangwang/', smiley_images : [ '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif', '11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif', '21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif', '31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif', '41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif', '51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif'], smiley_description : [ '1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif', '11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif', '21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif', '31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif', '41.gif','42.gif','43.gif','44.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif', '51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif','59.gif','60.gif'] }); //CKEDITOR.replace( 'editor1'); </script> </body></html>- 定制CKEditor的表情
- 定制CKEditor的表情
- CKEditor中表情的添加
- ckeditor 表情 问题解决
- CKEditor添加表情
- 将自己喜欢的表情添加到CKEditor中
- 将自己喜欢的表情添加到CKEditor中
- django-ckeditor表情包修改
- CKeditor 配置好的，支持QQ表情以及去掉多余功能.增加插入代码插件（附注释）
- CKeditor 配置好的，支持QQ表情以及去掉多余功能.增加插入代码插件（附注释）
- 【CKEditor】CKEditor 重置的实现
- 【CKEditor 】CKEditor 图片的上传
- 【CKEditor 】CKEditor 图片的上传
- gwt + ckeditor config.js定制化问题
- 毕业设计(十六)---发表文章(2)之- ckeditor 添加自定义表情
- CKeditor+JWPlayer+CKFinder CKeditor的jwplayer插件
- CKEditor 3.X使用小结---初始化与面板功能定制
- ckeditor配置与个性定制、属性、上传个人总结 转
- POJ 1062 昂贵的聘礼
- 更改Visual Studio 2010的主题设置
- xml的dom解析（jaxp实现）
- 起泡法
- Spring Batch 2将支持工作划分和基于注解的配置
- 定制CKEditor的表情
- CMS知识点总结
- __attribute__((packed)) 学
- Eclipse插件大全
- 项目自动化之道-7.安装与部署之增强安装形象
- 个性化推荐技术的十大挑战
- 用 IBM WebSphere DataStage 进行数据整合(2)
- Hadoop CDH4伪分布式安装
- WinServer 2003 R2关键性技术揭密
