让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对话框里就能看到图片的预览效果了。