复制即用 一款小巧的富文本编辑器 只为记录

<script type="text/javascript"

src="https://unpkg.com/[email protected]/release/wangEditor.min.js"></script>

<script type="text/javascript">
//加载文本编辑器
var E = window.wangEditor
var editor = new E('#editor')
editor.customConfig.uploadImgShowBase64 = true
//自定义菜单配置
editor.customConfig.menus = [ 'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
]


/* 处理上传图片的controller路径   根据自己情况进行修改*/
editor.customConfig.uploadImgServer = '../case/upload'
/* 定义上传图片的默认名字  与controller接收参数的名字要一致 */
editor.customConfig.uploadFileName = 'file'


// 设置图片超时时间
editor.customConfig.uploadImgTimeout = 10000


editor.customConfig.uploadImgHooks = {
before : function(xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
return {
prevent : false,
msg : '图片上传中'
}
// alert("图片")
},
success : function(xhr, editor, result) {


},
fail : function(xhr, editor, result) {
alert("图片插入错误")
},
error : function(xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout : function(xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert : function(insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这插入图片：

insertImg(result);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}


editor.create()
$('.w-e-toolbar .w-e-menu').css('padding', '5px 8px');
$('.w-e-text-container').css('height', '500px');

</script>

附上controller

String path = "D://images/case/";
List<String> pathList = FileUtil.upLoad(request, path, files);
String str = null;
for (int i = 0; i < pathList.size(); i++) {
str = "/images/case/" + pathList.get(i);
pathList.set(i, str);
}

return pathList;

FileUtil.java

package com.tianniu.util;


import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.UUID;


import javax.servlet.http.HttpServletRequest;


import org.springframework.web.multipart.MultipartFile;


public class FileUtil {


public static List<String> upLoad(HttpServletRequest request, String path,
MultipartFile[] files) {
List<String> list = new ArrayList<String>(); // 存放结果
BufferedOutputStream stream = null;
for (MultipartFile file : files) {
if (file != null && !file.isEmpty()) {


try {
byte[] bytes;
bytes = file.getBytes();


// 获取文件类型，即后缀名
String str = file.getOriginalFilename();
String suffix = str.substring(str.lastIndexOf("."));


// 用 当前日期+UUID作为文件名避免重名
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String dateStr = sdf.format(new Date()).replaceAll("-", "");
String name = dateStr
+ UUID.randomUUID().toString().replaceAll("-", "");


// 拼接文件绝对路径
String filePath = path + name + suffix;
File dest = new File(filePath);
// 检测是否存在目录
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
stream = new BufferedOutputStream(
new FileOutputStream(dest));
stream.write(bytes);
stream.close();
list.add(name + suffix);
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
}
}
return list;


}


}