CKeditor自定义上传图片功能

CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作，比如将图片路径写入数据库，图片加水印等等操作。实现原理：配置CKeditor的自定义图标，单击弹出一个子窗口，在在子窗口中上传图片实现我们的自己的功能，然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。实现步骤：1、配置CKeditor。网上很多资料，大家自己查。2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。1CKEDITOR.editorConfig=function(config)2{3//Definechangestodefaultconfigurationhere.Forexample:4config.language='zh-cn';5config.skin='v2';6//config.uiColor='#AADC6E';7config.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'],2122];2324config.extraPlugins='addpic';2526};3、在CKeditor\plugins文件夹下新建addpic文件夹，文件夹下添加addpic.JPG图标文件，建议尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目录下添加文件plugin.js，内容如下。1(function(){2//Section1:按下自定义按钮时执行的代码3vara={4exec:function(editor){5show();6}7},8b='addpic';9CKEDITOR.plugins.add(b,{10init:function(editor){11editor.addCommand(b,a);12editor.ui.addButton('addpic',{13label:'添加图片',14icon:this.path+'addpic.JPG',15command:b16});17}18});19})();文件中的show函数为显示子页面使用，我将它写在CKeditor所在的页面中。4、edit.aspx页面使用的jsedit.aspx页面就是使用CKeditor的页面。functionshow(){$("#ele6")[0].click();}functionupimg(str){if(str=="undefined"||str==""){return;}str="imgsrc='/html/images/"+str+"'/img";CKEDITOR.instances.TB_Content.insertHtml(str);close();}functionclose(){$("#close6")[0].click();}$(document).ready(function(){newPopupLayer({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为层中承载关闭按钮的层。代码如下divid="ele6"style="cursor:hand;color:blue;display:none;"/divdivid="blk6"class="blk"style="display:none;"divclass="head"divclass="head-right"/div/divdivclass="main"ahref="javascript:void(0)"id="close6"class="closeBtn"/aiframesrc="upimg.aspx"/iframe/div/div别忘记引用jquery和popup_layer.js。5、upimg.aspx页面aspx代码divasp:FileUploadID="FU_indexIMG"runat="server"/br/asp:ButtonID="Button1"runat="server"Text="上传"onclick="Button1_Click"/asp:ButtonID="Button2"runat="server"onclick="Button2_Click"Text="取消"//div对应的cs代码1protectedvoidButton1_Click(objectsender,EventArgse)2{3stringimgdir=UpImg();4script="window.parent.upimg('"+imgdir+"');";5ResponseScript(script);6}7protectedvoidButton2_Click(objectsender,EventArgse)8{9stringscript="window.parent.close();";10ResponseScript(script);11}12///summary13///输出脚本14////summary15publicvoidResponseScript(stringscript)16{17System.Text.StringBuildersb=newSystem.Text.StringBuilder("scriptlanguage='javascript'type='text/javascript'");18sb.Append(script);19sb.Append("/script");20ClientScript.RegisterStartupScript(this.GetType(),RandomString(1),sb.ToString());21}22///summary23///获得随机数24////summary25///paramname="count"长度/param26///returns/returns27publicstaticstringRandomString(intcount)28{29RNGCryptoServiceProviderrng=newRNGCryptoServiceProvider();30byte[]data=newbyte[count];31rng.GetBytes(data);32returnBitConverter.ToString(data).Replace("-","");33}Button1_Click为确定按钮的单击事件函数。其中使用UpImg函数实现上传图片文件，我还在其中实现了加水印，缩图，将图片文件的大小以及相对路径存入数据库等自定义操作，大家可以在此发挥。UpImg返回值为保存图片的相对路径，然后调用editer.aspx页面的js函数upimg。js函数upimg功能为将字符串插入到CKeditor的当前光标位置，插入的是html代码。至此为止带有新上传图片相对路径的img标签就插入CKeditor的编辑区了，能够显示图片了。Button1_Click为取消按钮的单击事件函数。调用editer.aspx页面的js函数close，将弹出层隐藏。