一、介绍：
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
二、使用方式：
- 直接下载：https://github.com/wangfupeng1988/wangEditor/releases
- 使用
npm下载：npm install wangeditor（注意wangeditor全部是小写字母） - 使用
bower下载：bower install wangEditor（前提保证电脑已安装了bower） - 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
三、使用：
重点是图片的上传和富文本内容的获取。
1.图片上传：
①存放在一个临时的文件夹里。
②将图片地址返给前台，富文本显示图片。
2.内容获取：
①获取富文本的内容，截取内容里的图片标签。
②将图片存入到一个新的文件夹里，替换图片的地址。
③将新的富文本的内容存储到数据库里。（这里我未作处理）
前台代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>富文本的使用</title> <style type="text/css"> body { width: 800px; margin: 0 auto 0 auto; } </style> </head> <body> <!--wangEditor 使用 B--> <div id="div1"> </div> <!--wangEditor 使用 E--> <button id="addBtn" onclick="addNews()">增加</button> </body> <script type="text/javascript" src="../release/wangEditor.js"></script> <script src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> var httpurl = "http://localhost:8081"; //富文本使用 var E = window.wangEditor; var editor = new E('#div1'); //重新设置富文本的内容 editor.customConfig.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'italic', // 斜体 'underline', // 下划线 'foreColor', // 文字颜色 'link', // 插入链接 'justify', // 对齐方式 'image', // 插入图片 'undo', // 撤销 'redo' // 重复 ]; // 隐藏“网络图片”tab editor.customConfig.showLinkImg = false; // 将图片大小限制为 3M editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 限制一次最多上传 1 张图片 editor.customConfig.uploadImgMaxLength = 1; //开启wangEditor的错误提示 editor.customConfig.debug=true; // 关闭粘贴样式的过滤 editor.customConfig.pasteFilterStyle = false; // 忽略粘贴内容中的图片 editor.customConfig.pasteIgnoreImg = true; //上传图片 将图片以文件的形式传给后台进行操作返回图片 url editor.customConfig.customUploadImg = function (files, insert) { var date = new FormData(); date.append("file", files[0]); $.ajax({ type: "POST", url: httpurl + "/test/upload", data: date, dataType: 'json', async: false, cache: false, contentType: false, processData: false, success: function (result) { insert(result.data);// insert 是获取图片 url 后，插入到编辑器的方法 } }) }; editor.create();//创建富文本 /** * 添加企业新闻 */ function addNews() { var formData = new FormData(); formData.append("news",editor.txt.html()); $.ajax({ type: "POST", url: httpurl + "/test/addNews", data: formData, dataType: 'json', async: false, cache: false, contentType: false, processData: false, success: function (result) { console.log(result); } }) } </script> </html>
后台代码：
/** * 图片上传 * @param request * @param file * @return */ public JSONObject upload(HttpServletRequest request,MultipartFile file) { JSONObject imgPathObject = new JSONObject(); Map map = new HashMap(); boolean isMultipart = ServletFileUpload.isMultipartContent(request); List<FileItem> list = null ; if(isMultipart){ FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); try { //获取文件名（带后缀名） String fileName = file.getOriginalFilename(); String suffixName = fileName.substring(fileName.lastIndexOf(".")); //企业新闻id String entNewsImgId = UUIDUtil.getOneUUID(); fileName = entNewsImgId + suffixName; //获取文件输入流 InputStream input = file.getInputStream(); // 获取当前时间 String format = DateUtil.DEF_DATE_FORMAT_STR; String strDate = DateUtil.dateToString(new Date(),format); String StrDateTime = strDate.substring(0, 10); //获取工程路径 String serverAddress = request.getServletContext().getRealPath("/"); String entNewsImgPath = serverAddress +"tempRes/busiPic/" + StrDateTime +"/" + fileName; int result = writeToLocal(entNewsImgPath, input); String imgPath = "http://localhost:8081/tempRes/busiPic/" + StrDateTime +"/" + fileName; if(result == 1) { map.put("data", imgPath); String entNewsStr = JSONObject.toJSONString(map); imgPathObject = JSONObject.parseObject(entNewsStr); } } catch (Exception e) { // TODO: handle exception } } return imgPathObject; } /** * 将InputStream写入本地文件 * @param filePath 写入本地目录 * @param input 输入流 * @throws IOException */ private static int writeToLocal(String filePath, InputStream input) { //定义每次读取的长度 int index = -1; //定义每次读取字节的大小与保存字节的数据 byte[] bytes = new byte[1024]; FileOutputStream downloadFile; try { //保证创建一个新文件 File file = new File(filePath); if (!file.getParentFile().exists()) { // 如果父目录不存在，创建父目录 file.getParentFile().mkdirs(); } file.createNewFile(); downloadFile = new FileOutputStream(filePath); while ((index = input.read(bytes)) != -1) { downloadFile.write(bytes, 0, index); downloadFile.flush(); } downloadFile.close(); input.close(); } catch (FileNotFoundException e) { e.printStackTrace(); return 0; } catch (IOException e) { e.printStackTrace(); return 0; } return 1; } /** * 获取富文本内容 * @param request * @param file * @return */ public JSONObject addNews(HttpServletRequest request, MultipartFile file) { Map map = new HashMap(); //新闻的UUID String entNewsId = UUIDUtil.getOneUUID(); String newsCon = "";//新的新闻内容 String newsImgPath = "";//新闻图片路径 String newsContent = request.getParameter("news");//获取新闻内容 System.out.println(newsContent); //截取图片路径 String tempSrc= "<img src=""; String[] imgStr = newsContent.split(tempSrc); String[] imgPathStr = new String[imgStr.length];//图片路径数组 System.out.println(imgStr.length); if(imgStr.length > 1) { String[] imgLengthStr = imgStr[1].split("""); int imgLength = imgLengthStr[0].length(); for (int i=1; i< imgStr.length; i++) { newsImgPath = imgStr[i].substring(0,imgLength); System.out.println(newsImgPath); //改变图片路径 String tempPort = "8081/"; String tempImgPath = request.getServletContext().getRealPath("/") + newsImgPath.split(tempPort)[1]; String tempImgUUID = newsImgPath.substring(newsImgPath.lastIndexOf("/")+1); System.out.println(tempImgPath); String imgPathNewAbove = request.getServletContext().getRealPath("/"); String imgPathNewBehind ="busiPic/entNewsPic/"+ entNewsId +"/pic_" + tempImgUUID; String imgPathNew = imgPathNewAbove + imgPathNewBehind; File oldFile = new File(tempImgPath); File newFile = new File(imgPathNew); Boolean bln = copyFile(oldFile,newFile); if(bln) imgPathStr[i-1] = newsImgPath.split(tempPort)[0] + tempPort + imgPathNewBehind; } newsCon = imgStr[0]; for (int i=1; i< imgStr.length; i++) { newsCon += tempSrc + imgPathStr[i-1] + imgStr[i].substring(imgLength); } System.out.print(newsCon); map.put("newsContent",newsCon); }else { map.put("newsContent",newsContent); } String newContentStr = JSONObject.toJSONString(map); JSONObject result = JSONObject.parseObject(newContentStr); return result; } /** * 复制文件 * @param source * @param dest * @throws IOException */ public static boolean copyFile(File source, File dest){ //保证创建一个新文件 if (!dest.getParentFile().exists()) { // 如果父目录不存在，创建父目录 dest.getParentFile().mkdirs(); } if (dest.exists()) { // 如果已存在,删除旧文件 dest.delete(); } InputStream input = null; OutputStream output = null; try { dest.createNewFile();//创建文件 input = new FileInputStream(source); output = new FileOutputStream(dest); byte[] buf = new byte[1024]; int bytesRead; while ((bytesRead = input.read(buf))>-1) { output.write(buf, 0, bytesRead); } output.close(); input.close(); }catch (IOException e) { e.printStackTrace(); }catch(Exception e){ e.printStackTrace(); return false; } return true; }
样式如图：
