1. 什么是wangeditor
(一个富文本编辑器)
2. 什么是富文本编辑器
(不止包含文字，还包含图片、表情、字体、表格、超链接、音频、视频等内容的文本编辑器)。
3. 为什么要用富文本编辑器
使内容更加丰富多彩。
4. 使用场景：
一切想要使内容丰富起来的内容输入框，都可以使用富文本编辑器。
5. 什么地方使用了富文本编辑器
：论坛、博客、OA、新闻网站
6. 引入资源(css/js)
7. 新建页面wangeditordemo.html
8. 页面添加引入样式和脚本
<link rel="stylesheet" href="plugins/wangeditor/min/wangEditor.min.css"/>
<script src="plugins/wangeditor/min/wangEditor.min.js"></script>
<script src="jquery/jquery-2.1.1.min.js"></script>
9.添加页面元素
<div id="editor"></div>
<input type="button" id="test1" value="拿html"/>
<input type="button" id="test2" value="拿text"/>
10.添加脚本
var E = window.wangEditor;
var editor =new E("#myEditor");
//开启debug模式
editor.customConfig.debug =true;
// 关闭粘贴内容中的样式
editor.customConfig.pasteFilterStyle =false;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg =false;
// 使用 base64 保存图片
//editor.customConfig.uploadImgShowBase64 = true
// 上传图片到服务器
editor.customConfig.uploadFileName ='editorFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer ='upload1'; //设置上传文件的服务器路径
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();
$("#btnGetHtml").bind("click",function(){
// alert("hello world");
var content = editor.txt.html();
alert(content);
});
</script>
11.在controller中添加如下方法
static StringUPLOAD_PATH ="/static/upload/";
@ResponseBody
@RequestMapping(value ="upload1", method = RequestMethod.POST)
public Mapupload1(MultipartFile editorFile, HttpServletRequest request) {
System.out.println("inner upload1");
Map result =new HashMap();
// 获取文件后缀
String fileName = editorFile.getOriginalFilename();
String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
// 文件存放路径
String filePath = request.getSession().getServletContext().getRealPath(UPLOAD_PATH);
//网络地址类
InetAddress ia=null;
try {
//获取本机网络地址
ia = ia.getLocalHost();
System.out.println(ia.getHostAddress());
}catch (UnknownHostException e) {
e.printStackTrace();
}
// 判断路径是否存在，不存在则创建文件夹
File file =new File(filePath);
if (!file.exists()) {
file.mkdirs();
}
// 将文件写入目标
file =new File(filePath, UUID.randomUUID() + fileSuffix);
try {
editorFile.transferTo(file);
}catch (IOException e) {
e.printStackTrace();
}
// 获取服务端路径（拼接图片上传以后的网络访问地址）
String serverPath = String.format("%s://%s:%s%s%s", request.getScheme(), ia.getHostAddress(), request.getServerPort(), request.getContextPath(), UPLOAD_PATH);
System.out.println(serverPath);
// 返回给 wangEditor 的数据格式
result.put("errno", 0);
result.put("data", new String[]{serverPath + file.getName()});
return result;
}
效果图
