Fckeditor

lixue150

浏览: 78396 次
性别:
来自: 合肥

最近访客更多访客>>

sxl1001

我...

根号九加一

dreamhappens

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

编辑器

这是对于Fckeditor的学习，主要是在网上查找了一些相关的资料，然后把他总结起来

在项目下的src下新建一个fckeditor.properties

fckeditor.properties

#Fckeditor setting
#用户上传文件路径目录
connector.userFilesPath=/userUploadFile
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl

WebContent下新建两个网页

分别是index.jsp

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fckeditor_demo</title>
<link href="<%=basePath%>/fckeditor/_samples/sample.css"
	rel="stylesheet" type="text/css" />
<script type="text/javascript"
	src="<%=basePath%>/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
//初始化fckeditor
window.onload = function()
{
	var sBasePath = "<%=basePath%>/fckeditor/";
		var oFCKeditor = new FCKeditor('content');
		oFCKeditor.BasePath = sBasePath;
		oFCKeditor.ReplaceTextarea();
	};
</script>
</head>

<body>
	<form action="showdata.jsp" method="post">
		<textarea name="content" style="overflow: scroll;"></textarea>
		<br> <input type="submit" value="提交" /> <input type="reset"
			value="重置" />
	</form>
</body>
</html>

showdata.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<title>FCKeditor - 显示数据</title>
</head>
<%
	request.setCharacterEncoding("UTF-8");
	String data = request.getParameter("content");
%>
<body>
	<h1>FCKeditor - 显示数据</h1>
	<hr />
	<div style="width: 500px; height: 300px;"><%=data%></div>

</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
	<display-name>Test</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
  
	<!-- FCKeditor配置 --> 
	<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>
	<!-- FCKeditor配置 --> 
</web-app>

所使用到的包

commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
fckeditor-java-core-2.4.jar
slf4j-api-1.5.2.jar
slf4j-simple-1.5.2.jar

如果希望修改显示的Fckeditor的窗口大小，可以去到fckeditor.js中进行修改

this.InstanceName	= instanceName ;
	this.Width			= width			|| '80%' ;
	this.Height			= height		|| '350' ;
	this.ToolbarSet		= toolbarSet	|| 'Default' ;
	this.Value			= value			|| '' ;

结构图