网页编辑器 nicEdit
1.下载nicEdit包,解压。
会有2个文件,一个js文件,一个gif的图片
一个nicEdit.js和nicEditorIcons.gif
2.将nicEdit拷贝到项目中,在对应的要进行编辑的页面导入js
注意:修改js中iconsPath的路径,即显示的图片路径
打开nicEdit.js找到 iconsPath :'./nicEdit/nicEditorIcons.gif'.
修改相对路径,使js执行的时候能找到改图片。
3.在要进行编辑的jsp中导入nicEdit.js文件,同时写入以下js对编辑器进行实例化
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({ fullPanel: true }).panelInstance('content1');
});
</script>
4.在body中写入div,这个div就是要编辑的区域,可以设置样式和宽度。
<div id="content1" class=" nicEdit-main " contenteditable="true" style="width: 600px; margin: 4px; min-height: 400px; overflow: hidden;"></div>
5.同时设置一个textarea进行隐藏
<textarea rows="15" cols="80" id="content" name="ann.content" style="display:none"></textarea>
6写入js
document.getElementById("content").value=document.getElementById("content1").innerHTML;
因为,div里的内容通过form表单是获取不到的,所以,通过js把div中的内容赋值给textarea,然后进行提交。
这样,from表单进行提交的时候实际上是提交的textarea中的内容,但是,这个内容中确实带有格式的文本。
7显示带有格式的文本。
如果直接从后台把带有格式的文本显示在页面上,会出现显示html语句的文本,不是我们想要的效果。那么,这里通过strust2和EL正则表达式填入到要显示的地方。
以下是jsp
<%@ page contentType="text/html;charset=UTF-8" import="java.util.*"
pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>信息发布</title>
<script type="text/javascript" src="${path}/nicEdit/nicEdit.js"></script>
<script src="${path}/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({ fullPanel: true }).panelInstance('content1');
});
</script>
<script>
function form_check(){
document.getElementById("content").value=document.getElementById("content1").innerHTML;
var content = document.getElementById("content").value;
if(content==""){window.alert("请输入正文!");return (false);}
}
</script>
</head>
<body>
<div>
<form action="" enctype="multipart/form-data" method="post">
<table>
<tr>
<td align ="right">信息发布:</td>
<td align ="left">
<textarea rows="15" cols="80" id="content" name="ann.content" style="display:none;"></textarea>
<div id="content1" class=" nicEdit-main " contenteditable="true" style=" border: 1px solid black;width: 800px; margin: 4px; min-height: 400px; overflow: hidden;height: 400px;"></div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>