wangEditor使用教程

怼烎@ 2022-09-03 09:20 19阅读 0赞

1、官网地址

[https://www.wangeditor.com/][https_www.wangeditor.com]

2、页面引入js

3、代码

4、js代码

const E = window.wangEditor
            const editor1 = new E('#inspectionContents');
            editor1.config.showLinkImg = false
            //图片上传，后端接口
            editor1.config.uploadImgServer=prefix+'/uploadImg'
            editor1.config.debug=true;
            editor1.config.uploadFileName = 'file'
            editor1.create();

5、后端代码

@RequestMapping("/uploadImg")
        @ResponseBody
        public String uploadImg(MultipartFile file, HttpServletRequest request)throws Exception
        {
            return dailyInspectionService.uploadImg(file, request);
        }

@Override
        public String uploadImg(MultipartFile file, HttpServletRequest request) {
            //协议名 http // https
            String scheme = request.getScheme();
            //域名
            String serverName = request.getServerName();
            //项目名
            String contextPath = request.getContextPath();
            //路径
            String url=scheme+"://"+serverName+":"+port+contextPath;
            //文件名
            String filename = file.getOriginalFilename();
            try {
                saveImg(file.getInputStream(),filename);
            }catch (Exception e){
                throw new RuntimeException("图片上传失败");
            }
            JSONObject object=new JSONObject();
            List<ReturnData> list=new ArrayList<>();
            ReturnData data=new ReturnData();
            data.setUrl(url+"/file/"+filename);
            data.setAlt("图片");
            list.add(data);
            object.put("errno","0");
            object.put("data",list.toArray());
            return object.toJSONString();
        }

/**
         * 图片处理
         *
         * @param stream
         * @param filename
         * @throws Exception
         */
        private void saveImg(InputStream stream, String filename)throws Exception{
            String                 path=this.getClass().getClassLoader().getResource("").getPath()+"/static/file/";
            File file=new File(path);
            String str=file.getPath()+File.separator+filename;
            FileOutputStream fs=new FileOutputStream(str);
            byte[] buffer =new byte[1024*1024];
            int bytesum = 0;
            int byteread = 0;
            while ((byteread=stream.read(buffer))!=-1) {
                bytesum+=byteread;
                fs.write(buffer,0,byteread);
                fs.flush();
            }
            fs.close();
            stream.close();
        }

6、图片上传对应的后端接口返回类型，wangEditor官网有详细的说明。以上方法是将图片上传到target/static/file/路径下。

[https_www.wangeditor.com]: https://www.wangeditor.com/