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

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

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

在FCKeditor编辑器中，图片上传功能是通过“dialog”目录中的“fck_image.html”页面通过表单的POST方式提交到服务器页面，而服务器页面再进一步的进行上传处理。上传表单的代码如“图一”：

提交到服务器页面的url地址也就是上图中的“action=“””的值，该值是通过配置文件（fckconfig.js）进行配置，这种实现方式非常灵活，使得我对这个功能的扩展也非常的方便。通过修改配置文件中的“FCKConfig.ImageUploadURL”选项就可以改变提交地址，从而让我制作的上传页面接收到POST过来的数据流。配置选项如“图二”：

虽然通过这样的配置后，表单就会提交到如图中的页面地址，那它是什么时候修改“图一”中的action的值的呢，它是通过“dialog”目录下的 “fck_image”目录下的“fck_image.js”文件在window.onload事件中修改action的值为配置文件中 FCKConfig.ImageUploadURL的值。修改代码如“图三”：