以下是JavaWeb项目集成wangEditor富文本编辑器，wangEditor是一个轻量级的富文本编辑器，优点是：集成速度快，容易上手。缺点是：相对于百度Ue功能较少，不过也基本满足了我们所需的功能。
亲测有效的教程！！！
下载： /download/qq_35309973/81854812
首先下载wangEditor项目，下面是项目的结构。
将release复制到项目中，以下是我的项目
下面是前端展示页面的代码。代码中，图片的文件服务器地址要换成自己定义的地址。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>wangEditor</title></head><body><form id="addForm"><div id="editor"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div><input ></form><!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！--><script type="text/javascript" src="../static/js/jquery.min.js"></script><script type="text/javascript" src="../static/release/wangEditor.min.js"></script><script type="text/javascript">var E = window.wangEditor;var editor = new E('#editor');//开启debug模式editor.customConfig.debug = true;// 关闭粘贴内容中的样式editor.customConfig.pasteFilterStyle = false;// 忽略粘贴内容中的图片editor.customConfig.pasteIgnoreImg = true;// 使用 base64 保存图片//editor.customConfig.uploadImgShowBase64 = true// 上传图片到服务器editor.customConfig.uploadFileName = 'myfile'; //设置文件上传的参数名称editor.customConfig.uploadImgServer = '/upload/editor/img'; //设置上传文件的服务器路径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()</script></body></html>
下面是后台的代码
@ResponseBody@RequestMapping(value = "/editor/img",method = RequestMethod.POST)public Map EditorImgUpload(@RequestParam("myfile") List<MultipartFile> list) {//获取视频文件存储路径 如:videos/videoString imgStoragePath = uploadSettings.getImgStoragePath();LinkedList<String> imgUrlList = new LinkedList<>();for (MultipartFile file : list) {//存储文件,生成文件下载地址 如:http://39.98.83.113:81/videos/micro/abc.mp4String imgLink = createLink(file,imgStoragePath);imgUrlList.add(imgLink);}return ResultUtils.errno(imgUrlList);}
然后JSON的返回值类型定义成
{// errno 即错误代码，0 表示没有错误。// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理"errno": 0,// data 是一个数组，返回若干图片的线上地址"data": ["图片1地址","图片2地址","……"]}
好啦，大功告成！！！
