我之前用过一个富文本框KindEdiotr,当时用这个富文本框上传图片只能上传到项目目录下,上传到本地磁盘则访问不到,于是每次打包都需要先把这个图片文件夹复制出来,防止丢失,随着项目使用,图片文件夹越来越大,给每次部署都带来麻烦,甚至因为有人不知道这个文件 而不小心误删了,当时时间太紧 一直没能解决,最近我用了一个新的富文本插件叫做wangEditor,在做这个上传图片功能的时候 我终于解决了这个问题,以下是这个问题的记录。
1.简单记录下wangEditor的使用
(1)引入js文件
(2)js代码如下
$(document).ready(function() {
var E = window.wangEditor;
//这里的id为<div id="editor"中的id.
var editor = new E('#editor');
editor.customConfig.onchange = function (html) {
//富文本框数据变化时触发
}
//设置富文本框toolbar
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
// 'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
debugger
// 上传图片到服务器
editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer = '/api/myfile/imgUpload.do'; //设置上传文件的服务器路径
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
//自定义上传图片事件
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
},
success: function (xhr, editor, result) {
console.log("上传成功");
},
fail: function (xhr, editor, result) {
console.log("上传失败,原因是" + result);
},
error: function (xhr, editor) {
console.log("上传出错");
},
timeout: function (xhr, editor) {
console.log("上传超时");
}
}
//创建编辑器
editor.create();
editor.txt.html();//获得富文本框的html
editor.txt.text();//获得富文本框文本内容
});
//解决富文本框转移字符问题 设置editor.txt.html();值的时候需要对值进行
//editor.txt.html(escape2Html(content));若内容从后台传过来并存在单个反斜杠,则需要在
//后台对其进行处理content.replaceAll("\\\\","\\\\\\\\") ;
function escape2Html(str) {
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
(3)jsp页面代码
<div class="add_list" style="height:350px;">
<h5><em class="wildcard">*</em>任务内容:</h5>
<div id="editor" style="width:842px;margin-left: 120px;margin-top:-10px;">
<!-- 默认显示 -->
<c:if test="${workTask.content==''||workTask.content==null}">
<p>请输入任务内容</p>
</c:if>
</div>
<input type="hidden" name="content"id="content" >
<input type="hidden" name="content_text"id="content_text" >
</div>
(4)后台图片上传代码
//图片上传
@RequestMapping(value = "/imgUpload",method=RequestMethod.POST)
@ResponseBody
public WangEditor uploadFile(
@RequestParam("myFile") MultipartFile multipartFile) {
try {
String path = "C:/ImgUpload";
InputStream inputStream = multipartFile.getInputStream();
// 获取文件名称
String filename = multipartFile.getOriginalFilename();
String newFilename= filename.substring(0,filename.lastIndexOf("."))+new Date().getTime()+
filename.substring(filename.lastIndexOf("."),filename.length());
File file = new File(path, newFilename);
// File file =new File(path);
//如果保存文件的地址不存在,就先创建目录
/* if(!file.exists()){
file.mkdirs();
}*/
FileUtils.copyInputStreamToFile(inputStream, file);
// 返回图片访问路径
String url =File.separator+"imgUpload"+File.separator+newFilename;
String [] str = {url};
WangEditor we = new WangEditor(str);
return we;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
2.返回图片url后,前端的访问不到本地磁盘资源的问题 有两种解决方法
- idea设置tomcat 如下图
打开配置页面
选中截图所示选项
新加source 将磁盘中保存图片文件的路径选中 并添加Application context 路径 例如 /imgUpload
但是这种方法只能用于idea中启动项目,若是直接用tomcat部署在服务器上的 则无效,所以介绍第二种方法
2.修改tomcat配置文件实现(这种方法 上图选中的地方无需选中)
打开tomcat配置文件conf/server.xml
在host里面增加这句话 <Context path="/imgUpload" docBase="C:\ImgUpload" reloadable="true"/>
那么在项目中即可访问项目外的磁盘资源了