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

你可能感兴趣的:(ckeditor)