让CkEditor整合自己的上传页面

CKEditor是继承FCKEditor的一款非常优秀的Html编辑器。借助JSON，CKEditor具有非常强大的扩展能力。下面我就接合一个实际的例子为大家展示一下它的这种能力。

问题：CKEditor工具栏上有一个Image按钮，是为内容添加图片。但是默认情况下对话框只提供了一个插入image URL的文本框。如果要从本地上传图片，官方的推荐做法是配合CKFinder。网上有很多这方面的示例，我这里就不多说了。不过CKFinder有三点让我不满意的地方：一是它在允许你上传文件的同时会把服务器上的文件显示出来，这可让我不爽。二是不同的后台技术需要配合相应的CKFinder－－PHP,ASP.net,JAVA等。这让已经有上传管理的系统进行整合不方便。三是CKFinder是进行文件处理，如果我想进行数据库的处理－－用户upload的图片存到数据库中，然后从数据库中读取图片放在编辑器里就没办法了。
目标：所以我希望在插入image对话框的URL文本框的旁边放一个我自己的Upload按钮，点击后页面转入我自己定义的文件/图片上传页面，接下来我自己处理upload的整个过程。最后返回一个url，通过这个url可以看到图片（可能是个动态页面，比如aspx文件，通过参数从数据库里取出图片）
实现：这样的目标在以前是需要通过更改源代码来实现，但现在不需要了，借助CKEditor强大的扩展能力，我们完全可以以javascript实现这一目标。

以下是代码:

JScript code

  


    
   function
    addUploadButton(editor){ 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 : 
   '
   upload
   '
   , onClick : 
   function
   ( evt ){ 
   var
    thisDialog 
   =
    
   this
   .getDialog(); 
   var
    txtUrlObj 
   =
    thisDialog.getContentElement(
   '
   info
   '
   , 
   '
   txtUrl
   '
   ); 
   var
    txtUrlId 
   =
    txtUrlObj.getInputElement().$.id; addUploadImage(txtUrlId); } }, 
   '
   browse
   '
   ); 
   //
   place front of the browser button
    
    } }); } 
   function
    addUploadImage(theURLElementId){ 
   var
    uploadUrl 
   =
    
   "
   ...
   "
   ; 
   //
   这是我自己的处理文件/图片上传的页面URL
    
    
   var
    imgUrl 
   =
    window.showModalDialog(uploadUrl); 
   //
   在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。
    //
   更多window.showModalDialog的使用方法参考
    //
   http://blog.csdn.net/jrq/archive/2010/01/27/5259946.aspx 
    
    
   var
    urlObj 
   =
    document.getElementById(theURLElementId); urlObj.value 
   =
    imgUrl; urlObj.fireEvent(
   "
   onchange
   "
   ); 
   //
   触发url文本框的onchange事件，以便预览图片
    
   } 

  

只要将这段代码放到页面onload事件中，比如放在CKEDITOR.replace()后面，就可以了。说明：CKEditor的扩展基本上都是通过on方法实现的。on方法有2个参数，第一个是CKEditor内部的各种事件名称，类似一个钩子。第二个参数是要扩展的代码，通常是一个js函数。因为我们要改动的是image对话框，所以对应的事件名称是dialogDefinition，对话框的名字是image。image url文本框在info选项卡内，通过getContents('info')定位到该选项卡，然后通过infoTab.add()方法就可以在选项卡内添加新的元素了。元素定义是JSON格式。我们这里定义了一个button，其中包括标签(label)和点击(onClick)以后要执行的动作（通常也是个js函数）。infoTab.add()第二个参数是用来指定新元素的位置－在该元素之前。如果不提供这个参数则新元素放在选项卡最后。我们在这里将这个新的Upload按钮放在CKEditor默认的browser按钮前面。
upload按钮点击后就是进行upload动作。这个是通过addUploadImage()完成的。该函数接受一个id参数，用来指定upload完成后图片的url返回给哪个表单元素。通过查看源代码可知图片URL文本框的id是txtUrl，但该id是CKEditor自己内部的id,不是页面上最终生成的HTML的id。不过CKEditor也提供了方法getContentElement()和getInputElement()进行2者的转换。
addUploadImage函数内容也很简单，先指定我自己的文件上传页面的URL，然后在一个模态窗口中打开这个页面，处理文件上传的所有细节。最终的结果是将图片上传后在服务器上的URL地址返回给一个变量imgUrl。最后把这个变量赋值给传进来的图片URL文本框里。最后手工触发一下onchange事件，这样在image对话框里就能看到图片的预览效果了。