Python之collection系列

Ckeditor在线编辑器在javaEE项目中的使用

一. 资料准备：

A：fCkeditor2.1.rar

B:fckeditor-java-2.3.zip

A里面放的是前台页面、css、js等

B fCkeditor不直接支持jsp应用，所有必须下在ckeditor-java.zip源码程序包

二. 所需资料包中的结构

这里是A包解压出来的目录结构。

包含前台页面、css、js等内容

这里是B包解压出来的结构。

存放的是后台浏览服务器、上传文件、图片、Flash等需要的servlet支持

三、文件拷贝到项目中

1.将A包解压出来的fckeditor目录拷贝到项目的WebRoot目录下，或者是WebRoot的其他子目录下， 本文中以为例

放好之后的结构应该是WebRoot\common\js\fckeditor\editor\....

2.将B包的src目录下的文件和文件夹放到项目的src目录下

放好之后的结构应该是.. \src\com\fredck\FCkeditor\..

结构图：

将html之类的无关类容删除

只留图片显示的部分。

3.jar包放到WEB-INF\lib下

commons-fileupload-1.1.1.jar commons-fileupload.jar FCKeditor-2.3.jar

四、配置

1.web.xml中加入如下片段

<servlet>

<servlet-name>Connector</servlet-name>

<servlet-class>com.fredck.FCKeditor.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>true</param-value>//是否允许浏览服务器

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet>

<servlet-name>SimpleUploader</servlet-name>

<servlet-class>com.fredck.FCKeditor.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>true</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>//允许上传的Flash格式

</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>/common/js/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>//前面部分对应到页面层的目录

</servlet-mapping>

<servlet-mapping>

<servlet-name>SimpleUploader</servlet-name> <url-pattern>/common/js/fckeditor/editor/filemanager/upload/simpleuploader</url-pattern>//前面部分对应到页面层的目录

</servlet-mapping>

2.fckconfig.js的配置修改

FCKConfig.LinkBrowser = true ;//文件链接选择服务器的开关、提交路径

FCKConfig.LinkBrowserURL=FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"

FCKConfig.ImageBrowser = true ; //图片链接选择服务器的开关、提交路径

FCKConfig.ImageBrowserURL=FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector";

FCKConfig.FlashBrowser = true ; //Flash链接选择服务器的开关、提交路径

FCKConfig.FlashBrowserURL=FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector";

FCKConfig.LinkUpload = true ; //文件上传的开关、提交路径

FCKConfig.LinkUploadURL=FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File';

FCKConfig.ImageUpload = true ; //图片上传的开关、提交路径

FCKConfig.ImageUploadURL=FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image';

FCKConfig.FlashUpload=true ; //Flash上传的开关、提交路径

FCKConfig.FlashUploadURL=FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;

五、在jsp中的运用

<textarea id="FCKeditor" name="content">

<bean:write name='xxForm'property='content' ignore='true'/></textarea>

<script language="JavaScript">

var oFCKeditor = new FCKeditor('FCKeditor', '100%', '300px' ) ;

oFCKeditor.BasePath = "common/js/fckeditor/";

oFCKeditor.ReplaceTextarea();

</script>

六、问题及解决

1. <servlet-mapping>

<servlet-name>Connector</servlet-name>

<url-pattern>/common/js/fckeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>//前面部分对应到页面层的目录

</servlet-mapping>

这个配置的url-pattern只要保证前面部分能跟前台对应即可：

/common/js/fckeditor/editor/filemanager/browser/default/connectors jsp/connector 这个目录是不存在的。没有jsp这个目录

这里只是映射的提交访问servlet的路径

2.其他问题见FCKEditor使用指南.pdf(见附件)