环境:
jdk1.6
tomcat6.0
myeclipse6.1
fckeditor2.6.4.1
jar:
总共需要5个jar包,在fckeditor-java-2.4.2-bin.zip 解压后的文件夹下可以找到4个,还有一个需要自己上网下载
5个jar:
(其中slf4j-api-1.5.8.jar 和 slf4j-jdk14-1.5.8.jar版本必须一致)
前四个jar能在fckeditor-java-2.4.2-bin.zip解压后的文件夹下找到
但是在fckeditor文件夹下的slf4j-api.jar 是1.5.2版本的, 我的slf4j的两个jar包都是从slf4j官网下载的。
slf4j官网下载地址:
http://www.slf4j.org/download.html 先下载下来slf4j.zip然后解压后在文件夹里找的到。
1.新建一个web工程
2.将上面的5个jar包导入到工程的WebRoot/WEB-INF/lib下
3.解压FCKeditor_2.6.4.1.zip后,将解压出来的文件夹fckeditor复制到WebRoot下
4.在src下建一个新.properties文件-->fckeditor.properties
内容如下:
connector.userFilesPath=UploadFile
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
5.在工程配置文件-->web.xml中配置一个servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
</web-app>
6.新建一个jsp文件,名为test.jsp,放到webRoot下即可
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.fckeditor.net" prefix="FCK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String content=request.getParameter("edt1");
if (content != null) {
content = content.replaceAll("\r\n", "");
content = content.replaceAll("\r", "");
content = content.replaceAll("\n", "");
content = content.replaceAll("\"", "'");
}else{
content = "";
}
content = new String(content.getBytes("iso8859-1"),"utf-8");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fck 测试</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
<form method="post" name="frm1">
<FCK:editor height="400" instanceName="edt1" value="<%=content%>" toolbarSet="Basic">
<FCK:config SkinPath="skins/office2003/"/>
</FCK:editor>
<input type="submit" value="提交">
</form>
<hr>
<%=content%>
</body>
</html>
<!--
如果不使用FCK tag 的话,可以使用如下的javascript方式调用
<script type="text/javascript">
var oFCKeditor = new FCKeditor("edt1");
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Height='400';
oFCKeditor.ToolBarSets="Basic";
oFCKeditor.Value="<%=content%>";
oFCKeditor.Create();
</script>
-->
7.目录结构如下图
8.先访问jsp页面,启动tomcat以后,直接访问jsp地址,我的是 http://localhost:8888/fckeditor01/test.jsp
然后就可以测试了(至于struts2来说,原理是一样的)
9.效果图
在上传图片的时候发现一个小问题:就是图片上传成功了以后,但你输入的时候插入图片,界面如下:
就是说源文件地址不正确,预览中不能正确显示,正确的应该是/fckeditor01/UploadFile/image/Jianyue18.jpg,我也不知道为什么少了一个"/",加上“/”就能正确显示了,这就是知其然不知其所以然的痛苦啊,之后有时间了研究一下源码再来分享。
此例是参考网上资料所做,特别感谢那些乐于分享的人们.
posted on 2009-07-21 14:22
liuyimx 阅读(1026)
评论(1) 编辑 收藏 所属分类:
fckEditor