使用FCKeditor在jsp中（一）

最新推荐文章于 2016-04-16 22:33:32 发布

Sphinx_yong

最新推荐文章于 2016-04-16 22:33:32 发布

阅读量133

点赞数

分类专栏：开源组件文章标签： fckeditor JSP Servlet Flash Web

开源组件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、准备

下载FCKeditor的最新版本2.4RC（这个是核心）FCKeditor_2.4.zip，若在Java环境中使用，还需要下载FCKeditor for java的工具包FCKeditor.Java 2.3（这里面提供了标签库和图片上传的jar）FCKeditor-2.3.zip 。

二、配置

新建工程compass，在WebRoot文件夹下新建文件夹FCKeditor（用来存放FCKeditor相关文件）
将FCKeditor_2.4包中的 edit 文件夹和fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 这四个文件放到项目中的 FCKeditor 目录。
将FCKeditor-2.3.zip 包中的 \web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录
将FCKeditor-2.3.zip 包中的 \src 下的 FCKeditor.tld 文件到项目的 WebRoot\WEB-INF 目录
在 WebRoot 目录下新建 UserFiles 文件夹，在此文件夹下新建 Image 和 Flash 两个文件夹
修改 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>
  </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>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>  刷新一下工程，有一个文件会出错，不管它是什么错，将错误信息清除
三、应用

新建一个提交页 test.jsp 文件和一个接收页 test1.jsp 文件

test.jsp 代码如下：

test1.jsp 代码如下：

就可以开始测试了，尤其是上传图片、flash功能

四、优化

删除 \WebRoot\FCKeditor\editor\filemanager\browser\default\connectors 目录下所有的文件，这些是用来浏览文件的，对于jsp的话是使用了 servlet 来处理，所以这些文件都是多余的

删除 \WebRoot\FCKeditor\editor\filemanager\upload 目录下所有的文件

删除 WebRoot\FCKeditor\editor\lang 目录下不需要的语言，如保留中文和英文还有 fcklanguagemanager.js 文件

删除 \WebRoot\FCKeditor\editor\skins 目录下不需要的皮肤文件，有三种皮肤，可根据需要进行删除

删除 \WebRoot\FCKeditor\editor\dialog\fck_image 目录下 fck_image_preview.html 文件中的部份文字，这些文字是出现在浏览图片时在预览框中的内容

<html>
<head>
<title>TEST</title>
</head>
<body>
<%=request.getParameter("testfck")%>
</body>
</html>

java 代码

<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck" %>
<html>
<head>
<title>Test</title>
</head>
<body>
<FORM action="updateMessage.jsp">
<fck:editor id="testfck" basePath="/compass/FCKeditor/"
height="100%"
skinPath="/compass/FCKeditor/editor/skins/default/"
toolbarSet="Default"
imageBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
</fck:editor>
</FORM>
</body>
</html>