第一次使用wangeditor算是遇到了很多坑,因为网上很多的都是用到java框架的,而框架我又没有学,经过两天的奋斗,算是初步解决上传一张图片的问题以及Tomcat重启后图片被删除的问题。
首先要先下载wangeditor, 官网地址:wangEditor官网
然后二话不说 ,贴上前端代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="wangeditor/wangEditor.js"></script>
</head>
<body>
<div id="div1">
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea>
<input type="button" id="tijiao" value="提交"/>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1');
editor.customConfig.menus = [
// 'head', // 标题
'bold' /** 粗体*/, 'fontSize' /** 字号 */, 'fontName' /** 字体 */,'italic' /** 斜体 */,
// 'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
// 'emoticon', // 表情 打开后支持表情功能
'image', // 插入图片
'table', // 表格
'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.uploadImgServer = '/wangeditor/upload' // 这是java的一个servlet
// 将图片大小限制为 10M
editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
editor.customConfig.uploadFileName = 'file';
editor.customConfig.showLinkImg= false;
// 限制一次最多上传 10张图片
editor.customConfig.uploadImgMaxLength = 10;
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url =result.data;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新到 textarea
$text1.val(html)
}
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
$("#tijiao").click(function(){
var content= $('#text1').val();
console.log(content);
alert(content);
})
</script>
</body>
</html>
package wangeditor.servlet;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.InetAddress;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import wangeditor.domain.wangeditor;
@WebServlet("/upload")
public class upload extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String path = this.getClass().getClassLoader().getResource("/").getPath();
int index = path.indexOf("wangeditor");
path = path.substring(0, index + "wangeditor".length()) + "/resources/upload/";
path = "E:/apache-tomcat-9.0.6/webapps/img"; //重点:在Tomcat目录下创建img文件,防止图片放在Tomcat目录下启动后,被删除掉
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setHeaderEncoding("UTF-8"); // 处理中文问题
sfu.setSizeMax(1024 * 1024); // 限制文件大小
String fileName = "";
try {
List<FileItem> fileItems = sfu.parseRequest(req);
System.out.println(fileItems);
for (FileItem item : fileItems) {
System.out.println(item.getName());
fileName = UUID.randomUUID().toString() + item.getName();
item.write(new File(path + "/" + fileName));
}
} catch (Exception e) {
e.printStackTrace();
}
// 获取图片url地址
JSONObject json = new JSONObject();
JSONArray arr = new JSONArray();
InetAddress address = InetAddress.getLocalHost();// 获取的是本地的IP地址
String hostAddress = address.getHostAddress();
String imgUrl ="../img/"+fileName;
arr.add(imgUrl);
json.put("errno", 0);
json.put("data", arr);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.print(json.toString());
out.flush();
out.close();
}
}
上传后的效果: