wangeditor富文本编辑器的使用（包含文件上传）
1、引入wangEditor的相关js和css文件
由于不知道怎么作为附件分享给大家，大家可以去 我的博客—下载 里面去免费下载相关资料，敬请谅解。
2、页面代码
<!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" />
<link rel="stylesheet" href="${contextPath}/css/zTreeStyle/ztree.css?versionString=$!versionString" type="text/css">
<link rel="stylesheet" href="${contextPath}/css/zTreeStyle/zTreeStyle.css?versionString=$!versionString" type="text/css">
<link href="${contextPath}/css/basic.css" type="text/css?versionString=$!versionString" rel="stylesheet" />
<link href="${contextPath}/css/jbox.css" type="text/css?versionString=$!versionString" rel="stylesheet" />
<link rel="shortcut icon" href="${contextPath}/images/icon/logo.ico?versionString=$!versionString" />
<script type="text/javascript" src="${contextPath}/js/jquery-1.7.1.js?versionString=$!versionString"></script>
<script src="${contextPath}/js/jquery.jBox.src.js?versionString=$!versionString" type="text/javascript"></script>
<script src="${contextPath}/js/jquery.jBox-zh-CN.js?versionString=$!versionString" type="text/javascript"></script>
<script src="${contextPath}/js/common/jboxutils.js?versionString=$!versionString" type="text/javascript"></script>
<script src="${contextPath}/js/ztree/jquery.ztree.core-3.1.js?versionString=$!versionString" type="text/javascript"></script>
<script src="${contextPath}/js/ztree/jquery.ztree.excheck-3.1.js?versionString=$!versionString" type="text/javascript"></script>
<script type="text/javascript" src="${contextPath}/js/versionContent/versionContent.js?versionString=$!versionString"></script>
<title>${
merchantTitle}</title>
<script language="JavaScript" type="text/javascript">
var webtype=".$webType";
var merchantUrl="";
var contextPath="${contextPath}";
</script>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="${contextPath}/wangEditer/wangEditor.js?versionString=$!versionString"></script>
<script type="text/javascript">
var editor = null;
$(function () {
const E = window.wangEditor;
editor = new E('#editor');
// 配置服务器端地址
editor.customConfig.uploadImgServer = '${contextPath}/original/original_upload.$webType';
//设置图片大小，七牛云限制4M
editor.customConfig.uploadImgMaxSize = 4 * 1024 * 1024;
//设置最多上传数量
editor.customConfig.uploadImgMaxLength = 20;
editor.customConfig.withCredentials = true;
editor.customConfig.uploadFileName = 'myfiles';
editor.customConfig.uploadImgTimeout = 300000;
editor.customConfig.debug = false;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
console.dir(files)
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
alert("ok")
console.dir(result)
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
alert("出错了")
console.dir(result)
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
};
editor.create();
});
// 封装 console.log 函数
function printLog(title, info) {
window.console && console.log(title, info);
}
</script>
<script>
function getContent() {
alert(editor.txt.html())
}
</script>
</head>
<div class="middle-right">
<div class="content">
<div class="box">
<form id="form" name="form" action="versionContent_addVersionContent.$webType" method="post" onsubmit="return VersionContent.check('add');">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="data_table">
<tbody>
<tr>
<td width="10%">
<b>*</b>标题：
</td>
<td>
<input type="text" name="versionContent.title" id="title" value="$!versionContent.title"/>
</td>
</tr>
<tr>
<td width="10%">
<b>*</b>发布时间：
</td>
<td>
<input name="versionContent.releaseTime" id="releaseTime" type="text" value="$!versionContent.releaseTime" style="width:110px;height: 19px;"
onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>
</td>
</tr>
<tr>
<td width="10%">
<b>*</b>内容：
</td>
<td>
<div id="editor">
$!versionContent.content
</div>
<div onclick="getContent()">点击查看html</div>
</td>
</tr>
</tbody>
</table>
</form>
<div class="clear"></div>
</div>
</div>
</div>
</html>
注：重点是在页面上添加如下js
<script type="text/javascript" src="${contextPath}/wangEditer/wangEditor.js?versionString=$!versionString"></script>
<script type="text/javascript">
var editor = null;
$(function () {
const E = window.wangEditor;
editor = new E('#editor');
// 配置服务器端地址
editor.customConfig.uploadImgServer = '${contextPath}/original/original_upload.$webType';
//设置图片大小，七牛云限制4M
editor.customConfig.uploadImgMaxSize = 4 * 1024 * 1024;
//设置最多上传数量
editor.customConfig.uploadImgMaxLength = 20;
editor.customConfig.withCredentials = true;
editor.customConfig.uploadFileName = 'myfiles';
editor.customConfig.uploadImgTimeout = 300000;
editor.customConfig.debug = false;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
console.dir(files)
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
alert("ok")
console.dir(result)
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
alert("出错了")
console.dir(result)
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
};
editor.create();
});
// 封装 console.log 函数
function printLog(title, info) {
window.console && console.log(title, info);
}
</script>
<script>
function getContent() {
alert(editor.txt.html())
}
</script>
3、在js中获取富文本编辑器的内容并且发给后台
注：重点是这个语句：params[‘versionContent.content’]= editor.txt.html();
addVersionContent:function(){
try {
$.jBox("iframe:" + contextPath+"/versionContent/versionContent_toAddVersionContent"+webtype, {
title : "添加功能介绍",
width : 950,
height : 500,
id:"addVersionContent",
buttons : {
"保存":0,
"取消":-1
},
submit: function (v, o, f) {
if (v == 0) {
$("#addVersionContent").contents().find("iframe").contents().find("form").submit();
return false;
}else{
return true;
}
}
});
}catch(e){
$.jBox.info(e.description, "商城温馨信息提示");
}
},
check:function(type)
{
var title = $("#title").val();
if (title == null || title == "") {
parent.showTip("请输入标题", "1");
return false;
}
var releaseTime = $("#releaseTime").val();
if (releaseTime == null || releaseTime == "") {
parent.showTip("请输入发布时间", "1");
return false;
}
VersionContent.submitForm(type);
return false;
},
submitForm: function (type) {
var params = {
};
$("#form").find(':input[type!="checkbox"]').each(function(i, obj){
params[obj.name] = obj.value;
});
params['versionContent.content']= editor.txt.html();
var url=""
if(type == "add"){
url = contextPath+"/versionContent/versionContent_addVersionContent"+webtype;
}
if(type == "edit"){
url = contextPath+"/versionContent/versionContent_editVersionContent"+webtype;
}
try {
jQuery.ajax({
type: "POST",
dataType: "json",
url:url,
data:params,
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(data) {
if (data.result == "0") {
alert(data.msg);
parent.location.href = contextPath + "/versionContent/versionContent_list" + webtype;
return true;
} else {
alert(data.msg);
parent.location.href = contextPath + "/versionContent/versionContent_list" + webtype;
return true;
}
}
});
}catch(e){
$.jBox.closeTip();
$.jBox.info(e.description, "商城温馨信息提示");
}
},
4、后台代码
对象的各个参数直接会封装到private对象中，然后进行保存标签字符串就可以了。
private VersionContent versionContent;
public void addVersionContent() throws Exception {
if (versionContent == null) {
versionContent = new VersionContent();
}
if (StringUtils.isBlank(versionContent.getTitle())) {
logger.error("versionContent.getTitle() is null");
this.outPutAjax("{\"msg\":\"标题不能为空\",\"result\":\"1\"}");
throw new TimeCardServiceException("versionContent.getTitle() is null");
}
if (StringUtils.isBlank(versionContent.getReleaseTime())) {
logger.error("versionContent.getReleaseTime() is null");
this.outPutAjax("{\"msg\":\"发布时间不能为空\",\"result\":\"1\"}");
throw new TimeCardServiceException("versionContent.getReleaseTime() is null");
}
if (StringUtils.isBlank(versionContent.getContent())) {
logger.error("versionContent.getContent() is null");
this.outPutAjax("{\"msg\":\"内容不能为空\",\"result\":\"1\"}");
throw new TimeCardServiceException("versionContent.getContent() is null");
}
try {
String id = serialGeneratorMgr.getSerialKey(Constants.VERSION_CONTENT_SERIAL); //自动生成Id
versionContent.setId(id);
versionContentService.insert(versionContent);
this.outPutAjax("{\"msg\":\"" + Constants.RESULT_MSG_SUCC + "\",\"result\":\"0\"}");
} catch (Exception e) {
logger.error("add company fail:", e);
this.outPutAjax("{\"msg\":\"" + Constants.RESULT_MSG_FAIL + "\",\"result\":\"1\"}");
throw new TimeCardServiceException(e);
}
}