Using Upload Feature in FCKeditor

{{Template:Smalltalk_Author|
|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

<source lang="xml" >
<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>
</source>
 
 
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.


<comment>http://docs.zkoss.org/wiki/Using_Upload_Feature_in_FCKeditor</comment>


[[Category:Overview]]
[[Category:3rd Party Components]]
{{Template:Smalltalk_Footer|
|name=Gu Wei Xing
}}