Spiga

扩展FCKeditor编辑器的图片上传功能

2010-03-22 09:12 by cbbukn, 2942 visits, 收藏, 编辑

在我使用的个人博客(Mr.d's Time)中,后台的文章发布使用的是FCKeditor编辑器,在FCKeditor编辑器中通过简单的配置就能使用已提供的图片上传的功能。但没有提供对上传后的图片进行管理,从而无法满足我日后的各种应用场景,比如:使用已上传的文件、删除已上传的文件等等,以至于在写博时,遇到“在文章中要插入图片”这样的应用让我的操作很繁琐(上传图片---记住文件件---手工写Url),因此无法让我享受到在写博时的快感。从而让我有了扩展FCKeditor编辑器图片上传功能的想法。

分析FCKeditor编辑器的图片上传流程

在FCKeditor编辑器中,图片上传功能是通过“dialog”目录中的“fck_image.html”页面通过表单的POST方式提交到服务器页面,而服务器页面再进一步的进行上传处理。上传表单的代码如“图一”:
Fck上传
提交到服务器页面的url地址也就是上图中的“action=“””的值,该值是通过配置文件(fckconfig.js)进行配置,这种实现方式非常灵活,使得我对这个功能的扩展也非常的方便。通过修改配置文件中的“FCKConfig.ImageUploadURL”选项就可以改变提交地址,从而让我制作的上传页面接收到POST过来的数据流。配置选项如“图二”:
Fck图片上传配置
虽然通过这样的配置后,表单就会提交到如图中的页面地址,那它是什么时候修改“图一”中的action的值的呢,它是通过“dialog”目录下的“fck_image”目录下的“fck_image.js”文件在window.onload事件中修改action的值为配置文件中FCKConfig.ImageUploadURL的值。修改代码如“图三”:
Fck上传

服务器端页面的上传的实现

通过本篇第一部分对FCKeditor的上传流程的分析,对于服务器端的处理流程,我想大家也非常的清楚这个处理过程-----“文件的上传功能”,但在上传的时候,我就可以对上传文件的信息录入数据库中,从而让我们方便管理上传后的文件。考虑大家对文件上传的都非常清楚,因此对服务器上传文件的代码我就贴出核心的部分,如“图四”:

在“图四”中,我们看到有段调用Js的方法,这个方法是在前面提到的“fck_image.js”中定义好的,目的就是当我们上传图片成功后自动帮我们填充该图片的链接地址,从而让我们无需拼接图片的Url地址。 

实现已上传图片文件的管理

通过在“fck_image.js”中的window.onload事件加入自定义的函数使用Ajax的方式访问服务器页面,获取已上传的图片信息,从而实现该功能,效果图如“图五”:
Mrd时光

Add your comment

9 条回复

  1. #1楼 阿一(杨正祎)      2010-03-22 16:25
    前一段时间在研究ckeditor,有时间的话,俺也写几篇相关文章。呵呵。。
     回复 引用 查看   
  2. #2楼[楼主] Jeffrey.Dan      2010-03-22 16:44
    @阿一(杨正祎)
    由于先前用了FCK版本,所有的扩展也以该版本为基础,就不在这方面追新了,呵呵呵··倒是期待您对ckeditor的分析。
     回复 引用 查看   
  3. #3楼 李杰      2010-03-22 21:43
    楼主能不能继续写下对文件重名的判断和删除图片的代码
     回复 引用 查看   
  4. #4楼 lcs-帅      2010-03-22 21:56
    我觉得应试在“浏览服务器”的那个页面上进行扩展修改。
     回复 引用 查看   
  5. #5楼[楼主] Jeffrey.Dan      2010-03-23 10:39
    @lcs-帅
    哪里都可以,只要对使用方便,我感觉在这个上传的地方扩展一下,比较方便,上传的时候就知道我上传了哪些文件。但是你那个方案也比较方便的。
     回复 引用 查看   
  6. #6楼[楼主] Jeffrey.Dan      2010-03-23 10:43
    @李杰
    文件的重名:1、上传的过程中,可以用File.Exists()进行一下判断嘛,如果存在就要根据你的具体需求改变咯,比如重命名等等,但是一般重命名很难存在昂,因为会使用GUID或时间等策略对文件的上传重命名嘛,而数据库中会保存真是的文件名。

    2、删除图片的,方法也可以按照获取图片一样,使用Ajax向服务器发送一个请求呀,然后删除文件和数据库里的信息嘛。
     回复 引用 查看   
  7. #7楼 顾磊      2010-06-21 15:24
    前段时间做项目的时候也做FCK图片上传的修改
    1、禁止FCK的文件浏览器,只允许用户上传图片,因为觉得要管理的话会出现安全问题
    2、上传的图片的文件全部以上传时间
    3、上传的图片路径是由程序员配置出来的(由于一个网站用到的FCK较多所以每个模块上传的图片要分类存储,比如博客图片就要存到用户的博客下,新闻就要保存到新闻文件夹下)
     回复 引用 查看   
  8. #8楼[楼主] Jeffrey.Dan      2010-06-21 23:38
    @顾磊
    话说FCK的新版本,ckeditor貌似比FCK用起来更爽点,基层了图片管理器。最近做个快速统一建站产品的时候用到这个,改装起来也方便
     回复 引用 查看   
  9. #9楼 顾磊      2010-06-22 12:46
    @Jeffrey.Dan
    ck还没用过.因为觉得FCK已经够了.等有空去看看
     回复 引用 查看