CKEditor发布了新版3.5.3,在JAVA环境里抢先试了下。
详细的changeLog可以参加http://ckeditor.com/whatsnew。
1、首先,建立WEB工程,导入commons-fileupload-1.2.1.jar和commons-io-1.4.jar两个包以及相应的ckeditor文件,目录结构如下:
2、修改ckeditor的config.js如下:
|
|
CKEDITOR.editorConfig = function(config)
{
config.language = 'zh-cn'; // 配置语言
config.uiColor = '#FFF'; // 背景颜色
config.width = 'auto'; // 宽度
config.height = '300px'; // 高度
config.skin = 'office2003';// 界面v2,kama,office2003
config.toolbar = 'Full';// 工具栏风格Full,Basic
};
|
|
3、修改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>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>CKEditor</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post"
action="display.jsp">
<table width="650" height="400" border="0" align="center">
<tr>
<td valign="top">
内容:
</td>
<td>
<textarea cols="80" id="content" name="content"></textarea>
<script type="text/javascript">
CKEDITOR.replace('content');
</script>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
|
|
4、修改display.jsp内容如下:
<%@page contentType="text/html;
charset=UTF-8"pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;
charset=UTF-8">
<title>Display
Content</title>
</head>
<%
request.setCharacterEncoding("UTF-8");
%>
<center>
<table width="600" border="0"bordercolor="000000"
style="table-layout:
fixed;">
<tr>
<td width="100" bordercolor="ffffff">
主题:
</td>
<td width="500" bordercolor="ffffff">
${param.title}
</td>
</tr>
<tr>
<td valign="top"bordercolor="ffffff">
内容:
</td>
<td valign="top"bordercolor="ffffff">
${param.content}
</td>
</tr>
</table>
</center>
</html>
|
|
5、运行项目,结果如下: