layui中使用wangEditor富文本编辑器

た入场券 2022-12-21 00:59 216阅读 0赞

<div id="div1">
    								    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    								</div>

layui.use(['form'], function () {
    				form = layui.form;
    				
    		  		const E = window.wangEditor;
    				const editor = new E('#div1');
    			   editor.config.uploadImgShowBase64=true;
    			   editor.config.uploadFileName = 'file';  //对应后台上传图片接口参数的名字
    			   editor.config.uploadImgServer = http()+'upload/uploadConimage'; //后台图片上传地址
    			   editor.config.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 3M
    			   editor.config.uploadImgMaxLength = 1//限制一次最多上传 5 张图片
    			// 或者 const editor = new E( document.getElementById('div1') )
    			editor.create()
    }）

后台上传图片接口

@PostMapping("uploadConimage")
        @ResponseBody
    	public Map<String,Object> uploadConimagea(@RequestParam("file") MultipartFile file) {
    		Map<String,Object> mv= new HashMap<String, Object>();
    		Map<String,String> mvv=new HashMap<String, String>();
    		String urlpat=null;
    		 try {
    			    Calendar date = Calendar.getInstance(); //Calendar.getInstance()是获取一个Calendar对象并可以进行时间的计算，时区的指定
    	            String originalFile = file.getOriginalFilename(); //获得文件最初的路径
    	            String uuid = UUID.randomUUID().toString();    //UUID转化为String对象  
    	            String newfilename=date.get(Calendar.YEAR)+""+(date.get(Calendar.MONTH)+1)+""+date.get(Calendar.DATE)+uuid.replace("-", "")+originalFile;
    	           	Path path =Paths.get("e:/file/img/"+ newfilename);  //图片保存的路径
    	         
    	           	
    	          /*  //得到完整路径名
    	            File newFile = new File(rootPath+newfilename);*/
    	            //文件不存在就创建
    	           	if(!Files.isWritable(path)) {
                        Files.createDirectories(Paths.get("e:/file/img"));    
                    }
    	            String filename=originalFile.substring(0, originalFile.indexOf("."));
    	            System.out.println(originalFile);
    	            System.out.println(filename);
    	            file.transferTo(path);
    	            System.out.println("newFile : "+path);
    	             urlpat="https://域名/img/"+newfilename; //图片访问地址
    	            //String urlpat= "/img/"+ newfilename;
    	            List<String> list=new ArrayList<String>();
    	            list.add(urlpat);
    	            mv.put("data", list);
    	    		mv.put("errno", 0);
    	    		return mv;
    	        } catch (Exception e) {
    	           e.printStackTrace();
    	        	 mv.put("success", 1);
    					return mv;
    	        }
    	}

接口返回格式，重要！！！

{
        // errno 即错误代码，0 表示没有错误。
        //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
        "errno": 0,
    
        // data 是一个数组，返回图片的线上地址
        "data": [
            "图片1地址",
            "图片2地址",
            "……"
        ]
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjUxNzE0_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjUxNzE0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1f4443f3a2b247f38e2f96759d49a33e.png