如何配置JSP中的FCKeditor编辑器（IDE:MyEclipse 6.5）
2014-11-02 14:55
357 查看
开发环境：
IDE：MyEclipse6.5
框架：Struts2+spring+hibernate
步骤：
1. 在fckeditor的官方网站http://ckeditor.com/download下载FCKeditor_2.5.1.zip和FCKeditor-2.3.zip（for
java），版本不同内容不同
2. 在MyEclipse中新建web项目，我的叫做wsjx
3. 解压缩两个文件，把FCKeditor_2.5.1.zip解压出来的fckeditor文件夹放在WebRoot目录下，把FCKeditor- 2.3.zip（for java）解压出来的web下的WEB-INF下的lib目录中的commons-fileupload.jar和FCKeditor-2.3.jar两个jar包拷到项目的lib目录下，把FCKeditor-2.3.zip（for java）解压出来的src目录下的FCKeditor.tld拷贝到项目的WEB-INF下
4. 修改fckeditor文件夹下的fckeditor.js，找到FCKeditor.BasePath 并附值FCKeditor.BasePath = '/wsjx/fckeditor/'
5. 修改fckeditor文件夹下的fckconfig.js，找到并作如下修改
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/jsp/connector' ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector' ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector' ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
不好意思，这部分的修改没有搞明白什么原因
6. 修改web.xml，加入：
web.xml
[xhtml] view
plaincopyprint?
<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>
7. 现在开始编写页面：有两个页面，一个是提交页面(addContent.jsp)，一个是显示页面(showContent.jsp)
addContent.jsp:
[xhtml] view
plaincopyprint?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>
<html>
<head>
<title>FCKeditor</title>
</head>
<body>
<form action="showContent.jsp" method="post">
<table align="center">
<tr>
<td></td>
</tr>
<tr>
<td>
<fck:editor id="content" basePath="/wsjx/fckeditor/" width="1000"
height="500" skinPath="/wsjx/fckeditor/editor/skins/office2003/"
toolbarSet="Default">
</fck:editor>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
showConten.jsp:这个相对简单
[xhtml] view
plaincopyprint?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>显示页面</title>
</head>
<body>
<%=request.getParameter("content")%>
</body>
</html>
现在部署到tomcat中，浏览，提交，看效果。
这还没有完，因为可能会出现几种错误：
1. 当你上传图片时，提示“没有权限”，在控制台会输出“找不到Image文件夹”，那么在UserFiles里新建Image文件夹，即可
2. 当传输文字包括中文时，可能会出现显示乱码的问题，那么把showContent.jsp中的<%=request.getParameter("content")%>改成<%=new String(request.getParameter("content").getBytes("ISO-8859-1"),"utf-8")%> 即可
3. 当上传中文名的图片时，图片名称显示乱码，解决方式，在FCKeditor-2.3.zip（for java）解压出来的文件夹下，找到ConnectorServlet.java和SimpleUploadServlet.java，分别在两个文件中找到DiskFileUpload upload = new DiskFileUpload();这句，并在后面加上upload.setEncoding("utf-8");重新编译，并使用WinRAR打到 jar包FCKeditor-2.3.jar的对应位置，替换掉原来的那个，即可
4. 当浏览服务器，并新建中文名的文件夹出现乱码时，只需设置tomcat的server.xml :
[xhtml] view
plaincopyprint?
<Connector port="8181" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="utf-8" />
以及
[xhtml] view
plaincopyprint?
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" URIEncoding="utf-8" />
红色为添加部分，即可
5. 如果你还使用了struts2来过滤，那么就修改web.xml（也可以有其他方法，但这个相对简单些）
把原来的：
[xhtml] view
plaincopyprint?
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
改成如下方式：
[xhtml] view
plaincopyprint?
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/struts/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>
即可
这样，就能畅快的享受fckeditor带给你的乐趣了……
IDE：MyEclipse6.5
框架：Struts2+spring+hibernate
步骤：
1. 在fckeditor的官方网站http://ckeditor.com/download下载FCKeditor_2.5.1.zip和FCKeditor-2.3.zip（for
java），版本不同内容不同
2. 在MyEclipse中新建web项目，我的叫做wsjx
3. 解压缩两个文件，把FCKeditor_2.5.1.zip解压出来的fckeditor文件夹放在WebRoot目录下，把FCKeditor- 2.3.zip（for java）解压出来的web下的WEB-INF下的lib目录中的commons-fileupload.jar和FCKeditor-2.3.jar两个jar包拷到项目的lib目录下，把FCKeditor-2.3.zip（for java）解压出来的src目录下的FCKeditor.tld拷贝到项目的WEB-INF下
4. 修改fckeditor文件夹下的fckeditor.js，找到FCKeditor.BasePath 并附值FCKeditor.BasePath = '/wsjx/fckeditor/'
5. 修改fckeditor文件夹下的fckconfig.js，找到并作如下修改
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/jsp/connector' ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector' ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector' ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
不好意思，这部分的修改没有搞明白什么原因
6. 修改web.xml，加入：
web.xml
[xhtml] view
plaincopyprint?
<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>
7. 现在开始编写页面：有两个页面，一个是提交页面(addContent.jsp)，一个是显示页面(showContent.jsp)
addContent.jsp:
[xhtml] view
plaincopyprint?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>
<html>
<head>
<title>FCKeditor</title>
</head>
<body>
<form action="showContent.jsp" method="post">
<table align="center">
<tr>
<td></td>
</tr>
<tr>
<td>
<fck:editor id="content" basePath="/wsjx/fckeditor/" width="1000"
height="500" skinPath="/wsjx/fckeditor/editor/skins/office2003/"
toolbarSet="Default">
</fck:editor>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
showConten.jsp:这个相对简单
[xhtml] view
plaincopyprint?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>显示页面</title>
</head>
<body>
<%=request.getParameter("content")%>
</body>
</html>
现在部署到tomcat中，浏览，提交，看效果。
这还没有完，因为可能会出现几种错误：
1. 当你上传图片时，提示“没有权限”，在控制台会输出“找不到Image文件夹”，那么在UserFiles里新建Image文件夹，即可
2. 当传输文字包括中文时，可能会出现显示乱码的问题，那么把showContent.jsp中的<%=request.getParameter("content")%>改成<%=new String(request.getParameter("content").getBytes("ISO-8859-1"),"utf-8")%> 即可
3. 当上传中文名的图片时，图片名称显示乱码，解决方式，在FCKeditor-2.3.zip（for java）解压出来的文件夹下，找到ConnectorServlet.java和SimpleUploadServlet.java，分别在两个文件中找到DiskFileUpload upload = new DiskFileUpload();这句，并在后面加上upload.setEncoding("utf-8");重新编译，并使用WinRAR打到 jar包FCKeditor-2.3.jar的对应位置，替换掉原来的那个，即可
4. 当浏览服务器，并新建中文名的文件夹出现乱码时，只需设置tomcat的server.xml :
[xhtml] view
plaincopyprint?
<Connector port="8181" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" URIEncoding="utf-8" />
以及
[xhtml] view
plaincopyprint?
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" URIEncoding="utf-8" />
红色为添加部分，即可
5. 如果你还使用了struts2来过滤，那么就修改web.xml（也可以有其他方法，但这个相对简单些）
把原来的：
[xhtml] view
plaincopyprint?
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
改成如下方式：
[xhtml] view
plaincopyprint?
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/struts/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>
即可
这样，就能畅快的享受fckeditor带给你的乐趣了……
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何配置JSP中的FCKeditor编辑器（IDE:MyEclipse 6.5）
- jsp如何配置fckeditor 2.4 （陆续更新）
- myeclipse配置打开jsp默认使用sublime编辑器
- 如何在myeclipse中配置开发JSP环境(转)
- jsp中使用FCKeditor编辑器组件的配置和优化
- JSP中如何配置FCKeditor
- 配置Myeclipse6.5+Tomcat6.0+Jdk1.6开发jsp！
- 如何在Netbeans IDE 中配置IBM DB2 的连接 How to configure IBM DB2 connection in Netbeans IDE 6.5
- 在JSP环境中如何配置和使用fckeditor
- 在MyEclipse6.5中配置fckeditor
- Eclipse+Myeclipse+Tomcat开发JSP的详细环境配置
- FCKeditor编辑器在JAVA中的使用与配置
- 在线编辑器fckeditor的精简,使用和配置
- pligg9.7beta搭起后HTML编辑器插件的安装(-fckeditor的配置与修改变相支持中文文件名：默认上传后不能正常调用-)就像csdn的这个编辑器
- FCKeditor编辑器在JAVA中的使用与配置
- tomcat或jboss下配置jsp版的FCKeditor2.3，以及判断内容不能为空
- 如何在Tornado中配置外部编辑器
- 在jsp环境中配置使用FCKEditor
- 在jsp环境中配置使用FCKEditor
- pligg9.7beta搭起后HTML编辑器插件的安装（fckeditor的配置与修改变相支持中文文件名）