定制CKEditor的表情

现在的位置: 首页 > 综合 > 正文

定制CKEditor的表情

2017年11月19日 ⁄ 综合 ⁄ 共 6646字 ⁄ 字号小中大 ⁄ 评论关闭

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_3.6.2配置及自定义使用
【下篇】自定义ckeditor编辑器的工具样式

作者: feces

该日志由 feces 于6年前发表在综合分类下，最后更新于 2017年11月19日.
转载请注明: 定制CKEditor的表情 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

定制CKEditor的表情

IT程序员开发必备-各类资源下载清单，史上最全IT资源，个人收藏总结！

作者: feces

书签

最新文章New

本站推荐

返回首页