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的页面。

复制代码

以上就是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 /// <summary>
13      /// 输出脚本
14      /// </summary>
15      public void ResponseScript( string script)
16     {
17         System.Text.StringBuilder sb = new System.Text.StringBuilder( " <script language='javascript' type='text/javascript'> " );
18         sb.Append(script);
19         sb.Append( " </script> " );
20         ClientScript.RegisterStartupScript( this .GetType(), RandomString( 1 ), sb.ToString());
21     }
22      /// <summary>
23      /// 获得随机数
24      /// </summary>
25      /// <param name="count"> 长度 </param>
26      /// <returns></returns>
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，将弹出层隐藏。

秒客网

CKeditor自定义上传图片功能

相关文章