使用wangEditor轻量级的富文本编辑器,来批量上传图片
1.wangEditor编辑器
wangEditor官网
相对其他几个编辑器来说, wangEditor还是比较功能齐全的, 而且用起来上手也快.
缺点就是表情不多, 就内置了几个新浪表情和emoji, 不过可以自己拓展 , 然后菜单的图标也不太好看
2. 初始化
- 点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可
- 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
- 使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demotitle>
head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditorb> 富文本编辑器p>
div>
<script type="text/javascript" src="/wangEditor.min.js">script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
script>
body>
html>如果想要自定义菜单宽度和输入框的大小的话 , 可以选择菜单栏和输入框分开
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor 菜单和编辑器区域分离title>
<style type="text/css">
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
height: 400px;
}
style>
head>
<body>
<div id="div1" class="toolbar">
div>
<div style="padding: 5px 0; color: #ccc">中间隔离带div>
<div id="div2" class="text">
<p>请输入内容p>
div>
<script type="text/javascript" src="/wangEditor.min.js">script>
<script type="text/javascript">
var E = window.wangEditor
var editor1 = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器
editor1.create()
script>
body>
html>
3. 上传图片
3.1 官方文档的方式
初始化富文本编辑器和html的代码就根据上面的自己调整就好了 , 这里直接说重点, js代码:
$(function(){
/*富文本编辑器初始化*/
var E = window.wangEditor;
var editor = new E('#div1', '#div2');
var remarks = $('#remarks');
/* 处理上传图片的controller路径 */
editor.customConfig.uploadImgServer = basePath + 'uploadFile/wangEditUploadImag';
/* 定义上传图片的默认名字 */
editor.customConfig.uploadFileName ='file';
// 限制一次最多上传 10 张图片
editor.customConfig.uploadImgMaxLength = 10;
// 配置服务器端地址
editor.customConfig.uploadImgServer = '/upload';
editor.customConfig.uploadImgHooks = {
fail:function (xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
alert(result.msg);
}
}
editor.create()
})这里接口返回的数据格式如下: 不要注释
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}java
@RequestMapping(value = "/wangEditUploadImag", method = RequestMethod.POST)
@ResponseBody
public String wangEditUploadImag(@RequestParam MultipartFile file, HttpServletRequest request,
HttpServletResponse response) {
ConcurrentMap object = new ConcurrentHashMap<>();
try {
/*
* servcie保存file
* 这里根据自己的上传服务器方法来实现
*/
String url = fileService.saveImg(file);
//成功的话
object.put("errno","0");
object.put("data", new String[]{url});
return GsonUtil.toJson(object);
} catch (Exception e) {
logger.error("UploadController>>>wangEditUploadImag: "+Exceptions.getStackTraceAsString(e));
//这里errno随便设置多少,只要不是0
object.put("errno","200");
object.put("msg","服务器异常");
return GsonUtil.toJson(object);
}
} 但是我发现这种方式,只能上传一张图片(可能是我哪里没配置好)
3.1 批量上传图片
js:
$(function(){
/*富文本编辑器初始化*/
var E = window.wangEditor;
var editor = new E('#div1', '#div2');
var remarks = $('#remarks');
//自己定义上传的方法
editor.customConfig.customUploadImg = function (files, insert) {
var daw = new FormData();
for(var i=0;i"files",files[i]);
}
index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.ajax({
url:basePath + 'uploadFile/wangEditUploadImag',
type: "POST",
data: daw,
async: false,
cache: false,
contentType: false,
processData: false,
success:function(da){
layer.close(index);
if(da.errno == 0){
for(var j=0;jelse{
alert(da.msg);
return;
}
}
});
}
editor.create()
}) java
@RequestMapping(value = "/wangEditUploadImag", method = RequestMethod.POST)
@ResponseBody
public Object wangEditUploadImag(@RequestParam(value = "files", required = false) List files, HttpServletRequest request) {
ConcurrentMap object = new ConcurrentHashMap<>();
String imgUrls[] = new String[files.size()];
try {
if(files != null&&files.size()>0) {
for (int i = 0; i < files.size(); i++) {
MultipartFile file = files.get(i);
/*
* servcie保存file
* 这里根据自己的上传服务器方法来实现
*/
String url = fileService.saveImg(file);
imgUrls[i] = url ;
}
}
//成功的话
object.put("errno","0");
object.put("data", imgUrls);
return GsonUtil.toJson(object);
} catch (Exception e) {
logger.error("UploadController>>>wangEditUploadImag: "+Exceptions.getStackTraceAsString(e));
//这里errno随便设置多少,只要不是0
object.put("errno","200");
object.put("msg","服务器异常");
return GsonUtil.toJson(object);
}
}