vue引用MarkDown(mavonEditor)编辑器，文档

mavonEditor

Install mavon-editor (安装)

 npm install mavon-editor --save

如何引入:

全局引用:

    // 全局注册
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");

不全局引用，在组件中引用 :

<template>
  <div>
    <div>
      <mavon-editor  class="comments"
        v-model="content"
        :subfield="false"
        ref="md"
        :toolbars="markdownOption"
        @change="change"
      />
      <div>
        <button @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>
<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
      data(){
        return{
          content:'', // 输入的markdown
          html:'',    // 及时转的html
          markdownOption:{ //自定义文本标签
                bold: true, // 粗体
                italic: true,// 斜体
                strikethrough: true, // 中划线
                underline: true, // 下划线
          }
        }
      }
      components:{
          mavonEditor,
      },
      methods:{
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
        submit(){
            console.log("提交");
        },
      }
  }
</script>

图片上传:

用 mavon-editor 自带的 imgAdd 属性将图片上传到服务器，将返回的地址替换到md当中

 

<template>
  <div>
    <div>
      <mavon-editor  class="comments"
        v-model="content"
        :subfield="false"
        @imgAdd="$imgAdd"
        ref="md"
        :toolbars="markdownOption"
        @change="change"
      />
      <div>
        <button @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>
<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
      data(){
        return{
          content:'', // 输入的markdown
          html:'',    // 及时转的html
          markdownOption:{ //自定义文本标签
                bold: true, // 粗体
                italic: true,// 斜体
                strikethrough: true, // 中划线
                underline: true, // 下划线
          }
        }
      }
      components:{
          mavonEditor,
      },
      methods:{
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
        submit(){
            console.log("提交");
        },
       // 将图片上传到服务器，返回地址替换到md中

        $imgAdd(pos, $file){
            console.log($file)
            let formdata = new FormData();
            formdata.append('file',$file)
            this.$axios.post('上传服务器链接', formdata).then(res => {
                console.log(res.data.url);
                this.$refs.md.$img2Url(pos, res.data.url);
            }).catch(err => {
                console.log(err)
            })
        },
      }
  }
</script>

 

图片删除：

图片删除的逻辑实现和代码都很简单：前端传给后端url全路径，后端接收并调用删除方法即可。

前端代码：

imgDel(pos){
	//通过pos[0]取出文件路径。
     let url = pos[0]
     /*调用axios发送请求。此处自己自行创建了一个header键值进行数据传递*/
     axios({
         url:'http://localhost/api/file/imgDel',
         method:'POST',
         headers:{'Img-Delete': url},
     }).then().catch(error=>{this.$message({message:error,type:'error',showClose:true,center:true})})
}

对应后端：

@PostMapping("imgDel")
public Result articleImgDel(@RequestHeader("Img-Delete")String url){
    if(url.isEmpty()){
        return Result.fail(ErrorCode.PARAMS_ERROR.getCode(), ErrorCode.PARAMS_ERROR.getMsg());
    }
    qiniuUtils.delete(url); //删除云服务器文件
    return Result.success(null);
}