让 ckeditor 完美集成自定上传页面,二招任选。。。

招数一：类插件

 

 

           CKEDITOR.on('dialogDefinition', function( ev ){

 

               var dialogName = ev.data.name;

 

               var dialogDefinition = ev.data.definition;

 

               if ( dialogName == 'image' ){

 

                   var infoTab = dialogDefinition.getContents( 'info' );

 

                   infoTab.add({

 

                       type : 'button',

 

                       id : 'upload_image',

 

                       align : 'center',

 

                       label : '上传',

 

                       onClick : function( evt ){

 

                           var thisDialog = this.getDialog();

 

                           var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');

 

                           var txtUrlId = txtUrlObj.getInputElement().$.id;

 

                           upfile_ajax_box(txtUrlId,'/upfiles/up.aspx?CKEditor=yes','CK文件上传',400,300);

 

                       }

 

                   }, 'browse'); //place front of the browser button

 

               }

 

           });

 

将以上代码放到 cdeditor 的　配置文件未尾。然后把　upfile_ajax_box(txtUrlId,'/upfiles/up.aspx?CKEditor=yes','CK文件上传',400,300);　改成你自己的上传页即可。upfile_ajax_box() 是偶自己写的ＪＳ方法，目的是动态添加一个ＤＩＶ层，然后这个层IFRAME引用上传页即可实现完美上传。（上述ckeditor　代码是参考另一位朋友的代码，记不清哪位了，他是用的 Dialog 上传，Dialog　只支持ＩＥ，所以偶才改用自己的ＪＳ通过 iframe 调用上传，完美兼容各浏览器。。。

 

 

招数二：完美法

 

在 ckeditor 的 config.js　中指定上传页为自己的上传页面。

 

config.filebrowserImageUploadUrl = '/upfiles/?'+Math.random();

然后在　/upfiles/ 上传完成后，输出以下　ＪＳ调用CKEDITOR自己的方法即可，此方法ＵＩ方面与ckediotr ＋ckfinder　无任何区别。。。（本身就是偶查看ckfinder源码，然后照做的哈）

 if (ckeditor != null && ckeditor != "" && ckeditor != " ")

                {

                    

                    String CKEditorFuncNum = Request.QueryString["CKEditorFuncNum"];

                    msg2 = "<script language=/"JavaScript/" type=/"text/javascript/">"

                       + "window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "','" + newfilepath.Replace(sitepath, "") + "','');</script>";

                }

很明显，CKEDIOTR 自己也是通过 div+iframe 的方式实现文件上传的。。推荐大家用第二种方法，几乎不改动任何ckeditor的源码。。。只是在 ckeditor 的 config.js　中指定上传页为自己的上传页面而已。。。

实际效果大家可以看偶网站 http://www.piewan.com 登录后发新闻呵呵