1. 安装并配置mavon-editor到Vue项目

前端vue，后端springboot实现markdown文件的编辑与上传。主要使用mavon-editor插件

1.1 安装

npm install mavon-editor --save

1.2 配置

新建mavenEditor.js

 // 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)

在main.js中引入

//引入mavenEditor
import './plugins/mavenEditor.js'

引入后效果如下，我把它放我博客里了

2. 前端构建mavon-editor组件

<template>
  <div>
     <h1>markdown</h1>
      <mavon-editor :ishljs = "true" v-model="value" ref=md @save="save" @imgAdd="imgAdd" />
</template>

注意：

• @imgAdd="imgAdd"主要监听图片上传事件
• @save=“save”**主要监听图片保存事件
• value保存整个markdown文件的内容

2.1 axios方法

// import axios from 'axios'
import axios from '@/request'
//上传md文件
export function postMd(name,typeId,content){
   return  axios.post('/saveMd', {
                        name: name,
                        typeId: typeId,
                        content: content
                     })
                     .then(function (response) {
                        console.log(response);
                     })
                     .catch(function (error) {
                        console.log(error);
                     });
}

//上传图片
export const uploadFile = (params) => {
   return axios({
     method: 'post',
     url: `/uploadFile`,
     data: params,
     headers: {
       'Content-Type': 'multipart/form-data'
     }
   });
 }

2.2 imgAdd与save方法

<script>
import {postMd,uploadFile} from '@/api/article'
export default {
   data(){
      return {
         value: '123',
        }
   },
   methods:{
      //保存md到后台
      save(){ 
         //传递name(文件名),typeId(文件所属类别),value(md文件内容）
         var result=postMd("555","java",this.value);
         console.log(result);
         this.dialogFormVisible=false
         
      },

      //保存图片到后台
      imgAdd(pos, $file){
        var _this = this;
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('image', $file);
        uploadFile(formdata).then(resp=> {
         var url = resp.data; //取出上传成功后的url
          if (resp.status == 200) {
          //  将后端返回的url放在md中图片的指定位置
          console.log(url)
           _this.$refs.md.$img2Url(pos, url)
          } else {
            _this.$message({type: resp.status, message: resp.statusText});
          }
        });
      },
   }
}
</script>

3 后端springboot处理

3.1 配置上传路径映射

1. 配置application.yml

#文件上传路径
file:
  upload:
    abpath: F:/note/
    urlpath: /note/**
    mdImageDir: /note/assets/

2. 添加路径映射

@Configuration
public class MyWebAppConfig implements WebMvcConfigurer {

    //文件夹绝对路径
    @Value("${file.upload.abpath}")
    private String abpath;

    //文件夹url
    @Value("${file.upload.urlpath}")
    private String ulrpath;

    public MyWebAppConfig() {
        System.out.println("注册进来了=====================");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(ulrpath).addResourceLocations("file:"+abpath);
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");

    }
}

3.2 controller处理axios请求

@RestController
public class ArticleController {
	//上传目录绝对路径
    @Value("${file.upload.abpath}")
    private String abpath;

    //上传目录url
    @Value("${file.upload.mdImageDir}")
    private String mdImageDir;

    //端口号
    @Value("${server.port}")
    private String port;


    //上传md文件
    @RequestMapping("/api/saveMd")
    //注意参数传递是以json格式，因此用@RequestBody定义接收参数
    public String saveMd(@RequestBody JSONObject param){
        //取出java中对应参数的值
        String str = param.getString("content");
        String name=param.getString("name");
        String typeId=param.getString("typeId");
        //文件保存路径  F:\note\555.md
        String filepath=abpath+name+".md";
        FileUtil.string2File(str,filepath);
        return "ok";
         }

    //上传图片
    @PostMapping("/api/uploadFile")
    public String uploadFile(@RequestParam("image") MultipartFile file, HttpServletRequest request){
         //上传的绝对路径  F:/note/assets/
        String imgAbPath=abpath+"assets/";
        //绝对路径对应urlpath   http://localhost:4000/note/assets/
        String imgUrlDir="http:"+request.getHeader("Origin").split(":")[1]+":"+port+mdImageDir;
        //返回对应的File类型f
        File f = FileUtil.upload(file, imgAbPath);

        //返回图片地址 http://localhost:4000/note/assets/image-20200924014614792.png  注意图片名子中间有加密
        return imgUrlDir+f.getName();

    }

}

3.3 FileUitl工具函数

使用部分eladmin中的函数

public class FileUtil {

    private static final Logger log = LoggerFactory.getLogger(FileUtil.class);

    /**
     * 将字符串写入指定文件(当指定的父路径中文件夹不存在时，会最大限度去创建，以保证保存成功！)
     *
     * @param res            原字符串
     * @param filePath 文件路径
     * @return 成功标记
     */
      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;
    }

    /**
     * Java文件操作 获取不带扩展名的文件名
     */
    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;
    }

}

4. 检验效果

可以看到后端返回的图片地址**“http://localhost:4000/note/assets/image-20200924014614792.png”**直接显示在了指定位置

再来看图片保存位置

md文件保存位置：

可以看到，已经成功实现了该功能，这样就可以把markdown编辑器完美整合到自己的项目中了。