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

评论

4 楼 yhceye2010 2011-08-06  

谁啊? 大呼小叫的~~

3 楼 lisongqiu168 2011-08-05  

我日[b][/b]

2 楼 lisongqiu168 2011-08-05  

大幅度释放

1 楼 lisongqiu168 2011-08-05  

艹 搞爷[b][/b]