ckEditor 在javaEE中的应用

                                     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(见附件)