springboot+vue项目中实现对mavon-editor的使用（上传服务器并回显）

npm install mavon-editor --save

main.js 中添加

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

（1）调用组件

（2）添加 save() 和 imgAdd()

axios的封装：

let base = 'http://localhost:9090'; //后台服务器的请求地址

export const postRequest=(url, params)=>{
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params  
    })
}

在要使用mavon-editor的组件的methods中添加 save() 和 imgAdd() :

    methods: {
    
      //保存md到后台
      save(){
        //传递name(文件名),typeId(文件所属类别),value(md文件内容）
        var params = {}
        params.name = this.name
        params.typeId = this.id
        params.content = this.editForm.content
        this.postRequest("/saveMd",params).then(res => {
          console.log(res)
        })
      },
      
      //保存图片到后台
      imgAdd(pos, $file){
        var _this = this;
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('image', $file);
        this.postRequest('/uploadFile',formdata).then(res => {
          console.log('res:'+res)
          var url = res //取出上传成功后的url
          console.log('pos:'+pos)
          _this.$refs.md.$img2Url(pos, url)
        })
      },
      
}

application.yml 中添加配置

#文件上传路径
file:
  upload:
    abpath: F:/note/
    urlpath: /note
      public static boolean string2File(String res, String filePath) {
        boolean flag = true;
        BufferedReader bufferedReader = null;
        BufferedWriter bufferedWriter = null;
        try {
            File distFile = new File(filePath);
            if (!distFile.getParentFile().exists()) distFile.getParentFile().mkdirs();
            bufferedReader = new BufferedReader(new StringReader(res));
            bufferedWriter = new BufferedWriter(new FileWriter(distFile));
            char buf[] = new char[1024];         //字符缓冲区
            int len;
            while ((len = bufferedReader.read(buf)) != -1) {
                bufferedWriter.write(buf, 0, len);
            }
            bufferedWriter.flush();
            bufferedReader.close();
            bufferedWriter.close();
        } catch (IOException e) {
            e.printStackTrace();
            flag = false;
            return flag;
        } finally {
            if (bufferedReader != null) {
                try {
                    bufferedReader.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return flag;
    }


    
    public static String getExtensionName(String filename) {
        if ((filename != null) && (filename.length() > 0)) {
            int dot = filename.lastIndexOf('.');
            if ((dot > -1) && (dot < (filename.length() - 1))) {
                return filename.substring(dot + 1);
            }
        }
        return filename;
    }

    
    public static String getFileNameNoEx(String filename) {
        if ((filename != null) && (filename.length() > 0)) {
            int dot = filename.lastIndexOf('.');
            if ((dot > -1) && (dot < (filename.length()))) {
                return filename.substring(0, dot);
            }
        }
        return filename;
    }



    
    public static File upload(MultipartFile file, String filePath) {
        Date date = new Date();
        SimpleDateFormat format = new SimpleDateFormat("yyyyMMddhhmmssS");
        String name = getFileNameNoEx(file.getOriginalFilename());
        String suffix = getExtensionName(file.getOriginalFilename());
        String nowStr = "-" + format.format(date);
        try {
            String fileName = name + nowStr + "." + suffix;
            String path = filePath + fileName;
            // getCanonicalFile 可解析正确各种路径
            File dest = new File(path).getCanonicalFile();
            // 检测是否存在目录
            if (!dest.getParentFile().exists()) {
                if (!dest.getParentFile().mkdirs()) {
                    System.out.println("was not successful.");
                }
            }
            // 文件写入
            file.transferTo(dest);
            return dest;
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        }
        return null;
    }

}

这样就实现了在springboot+vue项目中使用mavon-editor了，我们所上传的md文件就保存在了 F:/note/ 中，而图片则保存在了 F:/note/assets 中。