Using Upload Feature in FCKeditor

Author
Gu Wei Xing, software developer at NanTong in JiangSu province in China.

Date
January 11, 2007

Version
Applicable to ZK FCKeditor 2.3-3 and later.

Introduction

The upload feature in FCKeditor is important. By using this, you can upload images, flashs or files in any format to the server, and add them to your on-line document easily. This feature is integrated to ZK in zk-FCKeditor-2.3-3 and later. For more details about uploading in FCKeditor, please visit http://www.fckeditor.net .

Using upload

The two servlet classes, ConnectorServlet and SimpleUploaderServlet, from http://www.fckeditor.net/download are included into zk-FCKeditor-2.3-3. These classes are modified to work with commons-fileupload 1.1. So using upload in FCKeditor becomes very simple. All you should to do has only two steps. First you should copy commons-fileupload.jar and commons-io.jar which are included in the ZK standard distribution to /WEB-INF/lib. Second, add the following lines to your web.xml.

The Source Codes

<servlet>
     <servlet-name>Connector</servlet-name>
     <servlet-class>
          org.zkforge.fckez.connector.ConnectorServlet
     </servlet-class>
     <init-param>
          <param-name>baseDir</param-name>
          <param-value>/UserFiles/</param-value>
     </init-param>
     <init-param>
          <param-name>debug</param-name>
          <param-value>false</param-value>
     </init-param>
     <load-on-startup>2</load-on-startup>
 </servlet>

 <servlet>
     <servlet-name>SimpleUploader</servlet-name>
     <servlet-class>
          org.zkforge.fckez.uploader.SimpleUploaderServlet
     </servlet-class>
     <init-param>
          <param-name>baseDir</param-name>
          <param-value>/UserFiles/</param-value>
     </init-param>
     <init-param>
          <param-name>debug</param-name>
          <param-value>false</param-value>
     </init-param>
     <init-param>
          <param-name>enabled</param-name>
          <param-value>true</param-value>
     </init-param>
     <init-param>
          <param-name>AllowedExtensionsFile</param-name>
          <param-value></param-value>
     </init-param>
     <init-param>
          <param-name>DeniedExtensionsFile</param-name>
          <param-value>
 php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
          </param-value>
     </init-param>
     <init-param>
          <param-name>AllowedExtensionsImage</param-name>
          <param-value>jpg|gif|jpeg|png|bmp</param-value>
     </init-param>
     <init-param>
          <param-name>DeniedExtensionsImage</param-name>
          <param-value></param-value>
     </init-param>
     <init-param>
          <param-name>AllowedExtensionsFlash</param-name>
          <param-value>swf|fla</param-value>
     </init-param>
     <init-param>
          <param-name>DeniedExtensionsFlash</param-name>
          <param-value></param-value>
     </init-param>
     <load-on-startup>1</load-on-startup>
 </servlet>

 <servlet-mapping>
     <servlet-name>Connector</servlet-name>
     <url-pattern>
 /zkau/web/js/ext/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector
     </url-pattern>
 </servlet-mapping>
 <servlet-mapping>
     <servlet-name>SimpleUploader</servlet-name>
     <url-pattern>
 /zkau/web/js/ext/FCKeditor/editor/filemanager/upload/simpleuploader
     </url-pattern>
 </servlet-mapping>

Here the "zkau" is as defined in the init param, called "update-uri", of the "zkLoader" in web.xml. The "UserFiles" is the name of the upload directory. The uploaded image files will be under !0YourWebApplicationName.war\UserFiles\Image\!1, the flash files will be under !0YourWebApplicationName.war\UserFiles\ Flash\!1, etc.

Summary

As illustrated, it is very simple and easy to use upload feature in FCKeditor.

Copyright © Gu Wei Xing. This article is licensed under GNU Free Documentation License.