[ckedito系列]让ckEditor整合自己的上传页面

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实现这一目标。

以下是代码:

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