使用WangEditor富文本编辑器

wangEditor富文本编辑器
一、npm 安装 npm i wangeditor --save
二、导入import wangEditor from 'wangeditor'
三、创建

const baseUrl = process.env.VUE_APP_BASEURL;

			let _t = this;
            this.editor = new wangEditor(`#content`)
            
            // 配置 onchange 回调函数，将数据同步到 vue 中
            this.editor.config.onchange = (newHtml) => {
                this.form.content = newHtml
            }
            this.editor.config.uploadImgTimeout = 50000
            this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024
            this.editor.config.uploadImgMaxLength = 1
            this.editor.config.customUploadImg = function(files,insert) {
                if(files[0].size > 5 * 1024 *1024){
                    confirm("图片过大")
                }else{
            // files 是 input 中选中的文件列表
              const data = new FormData()
              data.append('file', files[0])
              data.append("fileSource",'1')
              axios.request({//上传图片到后台   
                method:'post',
                url:'/xxx/xxx',
                data: data
              }).then(res=>{
                if(res.status == codes.REQUEST_SUCCESS && res.data){
                    _t.$Message.success("上传成功！");
                  let file = res.data;
                  var imgUrl  = baseUrl+'/xxx/xxx?xxx='+file.uniqueKey //后台返回的文件路径
                  insert(imgUrl)//生成img标签并插入文章中
                }else{
                  _t.$message.error(res.data.msg)
                }
              })
            }
            }
            this.editor.config.uploadVideoMaxSize = 10 * 1024 * 1024
            this.editor.config.customUploadVideo = function (files, insert) {
                if(files[0].size > 10 * 1024 *1024){
                    confirm("视频过大")
                }else{
              const data = new FormData()
              data.append('file', files[0])
              data.append("fileSource",'1')
              axios.request({//上传图片到后台   
                method:'post',
                url:'/xxx/xxx',
                data: data
              }).then(res=>{
                if(res.status == codes.REQUEST_SUCCESS && res.data){
                    _t.$Message.success("上传成功！");
                  let file = res.data;
                  var imgUrl  = baseUrl+'/xxx/xxx?xxx='+file.uniqueKey //后台返回的文件路径
                  insert(imgUrl)//生成img标签并插入文章中
                }else{
                  _t.$message.error(res.data.msg)
                }
              })
            }
            }
            // 创建编辑器
            this.editor.create()

后端代码

···文件上传
public Map<String,Object> addfile(@RequestBody MultipartFile file, String fileSource) {
        Assert.notNull(file,"未找到文件");
        //唯一key
        String uniqueKey = "";
        //成功和失败标识
        boolean isFlay = false;
        //成功和失败描述
        String msg = "";
        //判断file数组不能为空并且长度大于0
        FileManagement fileInfo = FileManagement.create();
        if(file != null){
            Map<String ,Object> params = new HashMap();
            UserInfo userInfo = new UserInfo();
            params.put("fileSource",fileSource);
            fileInfo = fileManagementService.insert(params,file);
            if(fileInfo != null && !StringUtils.isEmpty(fileInfo.getUniqueKey())) {
                isFlay = true;
                msg = "文件上传成功";
            }else {
                msg = "文件上传失败";
            }
        }else {
            msg = "文件为空";
        }
        Map<String,Object> res = new HashMap<>();
        res.put("status",isFlay ? 1 : 0);
        res.put("message",msg);
        res.put("data",fileInfo.setFileId(0));
        return res;
    }

···文件下载
public void downloadFile(HttpServletResponse response, @RequestParam("xxx") String fileUk) {
        try {

            FileManagement fileInfo = fileManagementService.selectByUk(fileUk);
            //判断文件路径和文件名不为空
            if(fileInfo != null && !StringUtils.isEmpty(fileInfo.getFilePath()) && !StringUtils.isEmpty(fileInfo.getFileName())) {
                //下载
                UploadUtil.downloadLocal(response,fileInfo.getFilePath(),fileInfo.getFileName());
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }