1. 官网下载 版本3 http://www.wangeditor.com/
2. 开发文档 https://www.kancloud.cn/wangfupeng/wangeditor3/430149
3.了解以及提前准备事项
3.1 将图片转换为Base64编码，可以在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是很方便的，因为你不需要找一个保存图片的地方。
3.2 js 其中 encodeURI是加密方法 需要加密两次
var phone=encodeURI(encodeURI(document.getElementById("phone").value));
Java解密
String phone=URLDecoder.decode(StringUtil.trim(request.getParameter("phone")),"utf-8");
3.3 idea如何设置不必每次修改html代码就重启服务方法如下：
打开设置,把这个勾要选上
Mac按下 shitf+option+command+/ 四个键，会弹出一个对话框选择第一个，找到指定的再打勾
5.运行的效果图如下，可以实现图片的上传到本项目指定的文件夹下，进行图片的回显在当前页面；
当点击获取html按钮时，将富文本编辑器的内容获取到，通过Ajax方式发送到后台controller处理，接收该字符串，保存到数据库中，而前端页面图片的介绍可以从数据库获取该字段的值进行显示。
6.核心代码部分
wangEditor demo
欢迎使用 wangEditor 富文本编辑器
/**
*
* @param file 要上传的文件
* @return
*/
@RequestMapping("fileUpload")
@ResponseBody
public Object upload(@RequestParam("fileName") MultipartFile file, Map map){
//2012031220134655.jpg
System.out.println("file.getOriginalFilename() "+file.getOriginalFilename());
File outpath = null;
try{
//...../ew/out/production/resources/static
outpath = ResourceUtils.getFile("classpath:static");
}catch (Exception e){
e.printStackTrace();
}
File outsrc = new File(outpath+"/images/"+file.getOriginalFilename());
// 要上传的目标文件存放路径
String localPath = System.getProperty("user.dir")+"/src/main/resources/static/images/";
// 上传成功或者失败的提示
String msg = "";
if (FileUtils.upload(file, localPath, file.getOriginalFilename())){
// 上传成功，给出页面提示
msg = "上传成功！";
//
//srcFile：需要拷贝的文件 destFile：拷贝后的文件
try{
org.apache.commons.io.FileUtils.copyFile(new File(localPath+file.getOriginalFilename()),outsrc);
}catch (Exception e){
e.printStackTrace();
}
}else {
msg = "上传失败！";
}
// 显示图片
map.put("msg", msg);
map.put("fileName", file.getOriginalFilename());
return new WangEditorResponse("1",Arrays.asList("http://localhost:8080/images/"+file.getOriginalFilename()));
}
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
/**
文件上传工具
**/
public class FileUtils {
/**
*
* @param file 文件
* @param path 文件存放路径
* @param fileName 源文件名
* @return
*/
public static boolean upload(MultipartFile file, String path, String fileName){
//使用原文件名
String realPath = path + fileName;
File dest = new File(realPath);
try {
//保存文件
file.transferTo(dest);
return true;
} catch (IllegalStateException e) {
e.printStackTrace();
return false;
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
}
import java.util.List;
/*
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]
}
*/
public class WangEditorResponse {
private String errno;
private List data;
public WangEditorResponse() {
}
public WangEditorResponse(String errno, List data) {
this.errno = errno;
this.data = data;
}
public String getErrno() {
return errno;
}
public void setErrno(String errno) {
this.errno = errno;
}
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
}