CKeditor自定义上传图片功能

CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作，比如将图片路径写入数据库，图片加水印等等操作。

实现原理：配置CKeditor的自定义图标，单击弹出一个子窗口，在在子窗口中上传图片实现我们的自己的功能，然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。

实现步骤：

1、配置CKeditor。网上很多资料，大家自己查。

2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。

 

 1  CKEDITOR.editorConfig  =   function ( config )
 2  {
 3       //  Define changes to default configuration here. For example:
 4      config.language  =   ' zh-cn ' ;
 5      config.skin  =   ' v2 ' ;
 6       //  config.uiColor = '#AADC6E';
 7      config.toolbar  =
 8      [
 9         [ ' Source ' ,  ' - ' ,  ' Preview ' ,  ' - ' ],
10          [ ' Cut ' ,  ' Copy ' ,  ' Paste ' ,  ' PasteText ' ,  ' PasteFromWord ' ],
11          [ ' Undo ' ,  ' Redo ' ,  ' - ' ,  ' Find ' ,  ' Replace ' ,  ' - ' ,  ' SelectAll ' ,  ' RemoveFormat ' ],        
12           ' / ' ,
13          [ ' Bold ' ,  ' Italic ' ,  ' Underline ' ],
14          [ ' NumberedList ' ,  ' BulletedList ' ,  ' - ' ,  ' Outdent ' ,  ' Indent ' ],
15          [ ' JustifyLeft ' ,  ' JustifyCenter ' ,  ' JustifyRight ' ,  ' JustifyBlock ' ],
16          [ ' Link ' ,  ' Unlink ' ,  ' Anchor ' ],
17          [ ' addpic ' , ' Flash ' ,  ' Table ' ,  ' HorizontalRule ' ,  ' Smiley ' ,  ' SpecialChar ' ,  ' PageBreak ' ],//此处的addpic为我们自定义的图标，非CKeditor提供。
18           ' / ' ,
19          [ ' Styles ' ,  ' Format ' ,  ' Font ' ,  ' FontSize ' ],
20          [ ' TextColor ' ,  ' BGColor ' ],
21         
22      ];
23 
24      config.extraPlugins  =   ' addpic ' ;
25 
26  };

 3、在CKeditor\plugins文件夹下新建addpic文件夹，文件夹下添加addpic.JPG图标文件，建议尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目录下添加文件plugin.js，内容如下。

 

 1  ( function  () {
 2       // Section 1 : 按下自定义按钮时执行的代码
 3       var  a  =  {
 4          exec:  function  (editor) {
 5              show();
 6          }
 7      },
 8      b  =   ' addpic ' ;
 9      CKEDITOR.plugins.add(b, {
10          init:  function  (editor) {
11              editor.addCommand(b, a);
12              editor.ui.addButton( ' addpic ' , {
13                  label:  ' 添加图片 ' ,
14                  icon:  this .path  +   ' addpic.JPG ' ,
15                  command: b
16              });
17          }
18      });
19  })();

 文件中的show函数为显示子页面使用，我将它写在CKeditor所在的页面中。

4、edit.aspx页面使用的js

edit.aspx页面就是使用CKeditor的页面。

 

function  show() {

    $( " #ele6 " )[ 0 ].click();
}
function  upimg(str) {
     if  (str  ==   " undefined "   ||  str  ==   "" ) {
         return ;
    }
    str  =   " "   +  str + " ' " ;
    CKEDITOR.instances.TB_Content.insertHtml(str);
    close();
}
function  close() {
    $( " #close6 " )[ 0 ].click();
}
$(document).ready( function  () {
     new  PopupLayer({ trigger:  " #ele6 " , popupBlk:  " #blk6 " , closeBtn:  " #close6 " , useOverlay:  true , offsets: { x:  50 , y:  0 } });
});    

 以上就是js的代码，弹出窗口是使用jquery的弹出层，弹出层中嵌套iframe，iframe中使用upimg.aspx上传页面，大家如果有其他需要可以自己去设计弹出效果。为了大家调试方便，我将我实现弹出层的代码贴出来。

弹出层效果使用的是popup_layer.js方案，需要进一步加工的朋友可以自己在百度中谷歌。ele6为弹出激发需要的层，blk6为弹出层主体，close6为层中承载关闭按钮的层。代码如下

 

< div  id ="ele6"  style ="cursor:hand; color: blue; display:none;" > div >
     < div  id ="blk6"  class ="blk"  style ="display:none;" >
         < div  class ="head" >< div  class ="head-right" > div > div >
         < div  class ="main" >                 
             < a  href ="javascript:void(0)"   id ="close6"  class ="closeBtn" > a >                 
             < iframe  src ="upimg.aspx" > iframe >                     
         div >             
     div >

别忘记引用jquery和popup_layer.js。

 

5、upimg.aspx页面

aspx代码

 

< div >
         < asp:FileUpload  ID ="FU_indexIMG"  runat ="server"   />
         < br  />
     < asp:Button  ID ="Button1"  runat ="server"  Text ="上传"  onclick ="Button1_Click"   />
         < asp:Button  ID ="Button2"  runat ="server"  onclick ="Button2_Click"  Text ="取消"   />
         div >

对应的cs代码

 

 1  protected   void  Button1_Click( object  sender, EventArgs e)
 2      {
 3           string  imgdir  =  UpImg();        
 4          script  =   " window.parent.upimg(' "   +  imgdir  +   " '); " ;
 5          ResponseScript(script);
 6      }
 7       protected   void  Button2_Click( object  sender, EventArgs e)
 8      {
 9           string  script  =   " window.parent.close(); " ;
10          ResponseScript(script);
11      }
12  ///  

13       ///  输出脚本
14       ///  

15       public   void  ResponseScript( string  script)
16      {
17          System.Text.StringBuilder sb  =   new  System.Text.StringBuilder( " " );
18          sb.Append(script);
19          sb.Append( " " );
20          ClientScript.RegisterStartupScript( this .GetType(), RandomString( 1 ), sb.ToString());
21      }
22       ///  

23       ///  获得随机数
24       ///  

25       ///   长度
26       ///  
27       public   static   string  RandomString( int  count)
28      {
29          RNGCryptoServiceProvider rng  =   new  RNGCryptoServiceProvider();
30           byte [] data  =   new   byte [count];
31          rng.GetBytes(data);
32           return  BitConverter.ToString(data).Replace( " - " ,  "" );
33      }

Button1_Click为确定按钮的单击事件函数。其中使用UpImg函数实现上传图片文件，我还在其中实现了加水印，缩图，将图片文件的大小以及相对路径存入数据库等自定义操作，大家可以在此发挥。UpImg返回值为保存图片的相对路径，然后调用editer.aspx页面的js函数upimg。js函数upimg功能为将字符串插入到CKeditor的当前光标位置，插入的是html代码。至此为止带有新上传图片相对路径的img标签就插入CKeditor的编辑区了，能够显示图片了。

Button1_Click为取消按钮的单击事件函数。调用editer.aspx页面的js函数close，将弹出层隐藏。