一:xhEditor简介
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器。
二:xhEditor下载
官方下载地址:http://xheditor.com/download
三:xhEditor使用方法
如上图我们要完成一个在jsp页面中添加一个xhEditor富文本编辑框步骤如下:
1.在jsp页面中加入xhEditor需要的js包和jquery包
<script type="text/javascript" src="${ctx}/scripts/xheditor/xheditor-zh-cn.min.js"></script>
<script type="text/javascript" src="${ctx}/script/jquery-1.4.4.min.js"></script>
注:此处的${ctx}标签是移入的一个外部的jsp文件,它的作用是获取当前工程的路径和在jsp页面写入以下代码一致:
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
2.在jsp页面引用xhEditor标签
2.1.以下代码我们jsp页面body中建立一个<table></table>,在table中加入xhEditor的引用方法<textarea></textarea>
<table>
<tr>
<td width="70" height="32" align="center" valign="middle">课程描述</td>
<td width="300" height="32" align="left" valign="middle"><label>
<div>
<textarea id="descirbe" name="descirbe" rows="10" style="width:150%; border: 1px" >${coursewareDescribe}</textarea>
</div>
<div id="uploadList"></div>
</label></td>
</tr>
</table>
2.2.在head标签加入js方法,用与图片上传
<script>
$(document).ready(function(){
//初始化xhEditor编辑器插件
$('#descirbe').xheditor({
tools:'full',
skin:'default',
upMultiple:false,
upImgUrl: "/xheditor/UploadFileServlet",
upImgExt: "jpg,jpeg,gif,bmp,png",
onUpload:insertUpload
});
//xbhEditor编辑器图片上传回调函数
function insertUpload(msg) {
var _msg = msg.toString();
var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
var _picture_path = Substring(_msg);
var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
$("#descirbe").append(_msg);
$("#uploadList").append(_str);
}
//处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
function Substring(s){
return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
}
});
$(document).ready(function(){
//初始化xhEditor编辑器插件
$('#objectives').xheditor({
tools:'full',
skin:'default',
upMultiple:false,
upImgUrl: "/xheditor/UploadFileServlet",
upImgExt: "jpg,jpeg,gif,bmp,png",
onUpload:insertUpload
});
//xbhEditor编辑器图片上传回调函数
function insertUpload(msg) {
var _msg = msg.toString();
var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
var _picture_path = Substring(_msg);
var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
$("#objectives").append(_msg);
$("#uploadList").append(_str);
}
//处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
function Substring(s){
return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
}
});
$(document).ready(function(){
//初始化xhEditor编辑器插件
$('#student').xheditor({
tools:'full',
skin:'default',
upMultiple:false,
upImgUrl: "/xheditor/UploadFileServlet",
upImgExt: "jpg,jpeg,gif,bmp,png",
onUpload:insertUpload
});
//xbhEditor编辑器图片上传回调函数
function insertUpload(msg) {
var _msg = msg.toString();
var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
var _picture_path = Substring(_msg);
var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='return false'/><label>"+_picture_name+"</label><br/>";
$("#student").append(_msg);
$("#uploadList").append(_str);
}
//处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
function Substring(s){
return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
}
});
</script>
3.完成