wangEditor富文本编辑器使用

• vue.js结合wangEditor使用

  ---

  首先引入

1. wangEditor.min.js  在页面加载完成后初始化wangEditor

<div class="el-dialog__body"> <el-form :model="noteForm" ref="noteForm" label-width="80px" class="demo-ruleForm"> <el-form-item label="备注"> <div id="add-note" class="desc-area"> <%--<div class="project-info"></div>--%> </div> </el-form-item> </el-form> </div> $(function (){ all = []; targ = ['#add-note']; var E = window.wangEditor; targ.forEach((id) => { var editor = new E(id); all.push(editor); editor.customConfig.menus = [ 'image', // 插入图片 'bold', // 粗体 'italic', // 斜体 'fontSize', // 字号 'fontName', // 字体 'foreColor', // 文字颜色 'backColor' // 背景颜色 ]; editor.customConfig.uploadImgShowBase64 = true; // 获取内容 // 图片批量上传 editor.customConfig.customUploadImg = function (files, insert) { var daw = new FormData(); for(var i=0;i<files.length;i++){ daw.append("files",files[i]); } $.ajax({ url:"${pageContext.request.contextPath}/require/upload", type: "POST", data: daw, async: false, cache: false, contentType: false, processData: false, success:function(da){ if(da.errno == 0){ for(var j=0;j<da.data.length;j++){ insert(da.data[j]); } }else{ alert(da.msg); return; } }, }); } editor.create(); })

后台代码

/** * @return Map<String , Object> * @Author dingyf * @Description //获取富文本编辑器批量上传图片 * @Date 2019/12/18 13:35 * @Param [files, request] **/ @RequestMapping(value = "/upload") @ResponseBody public Map<String, Object> upload(@RequestParam(value = "files", required = false) List<MultipartFile> files, HttpServletRequest request) { Map<String, Object> resultMap = Maps.newHashMap(); String imgUrls[] = new String[files.size()]; try { if (files != null && files.size() > 0) { for (int i = 0; i < files.size(); i++) { String url1=webSocketServerIp+url; String filezurl = FileUtil.uploadFile(uploadFolder, files.get(i)); imgUrls[i] = url1+filezurl; } } resultMap.put("errno", 0); resultMap.put("data", imgUrls); return resultMap; }catch (Exception e){ resultMap.put("errno", 0); return resultMap; } }   public class FileUtil { public static String uploadFile(String path, MultipartFile file) throws Exception{ File file1=new File(path); if(!file1.exists()){ file1.mkdirs(); } String fileName = file.getOriginalFilename(); String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 文件上传后的路径 fileName = UUID.randomUUID() + suffixName; String uppath=path+fileName; File targetFile = new File(uppath); file.transferTo(targetFile); return fileName; }

支持多图片上传

如果编辑器中添加表格默认回显是没有格式的需要自己引入

/* table 样式 */ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } table th { border-bottom: 2px solid #ccc; text-align: center; } /* blockquote 样式 */ blockquote { display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1; } /* code 样式 */ code { display: inline-block; *display: inline; *zoom: 1; background-color: #f1f1f1; border-radius: 3px; padding: 3px 5px; margin: 0 3px; } pre code { display: block; } /* ul ol 样式 */ ul, ol { margin: 10px 0 10px 20px; }

至此使用结束