VUE使用Vditor Markdown编辑器

先安装

npm install vditor --save

简单使用

<template>
    <div id="vditor" name="description" ></div>
</template>
<script>
    import Vditor from "vditor"
    import "vditor/dist/index.css"
export default {
    data(){
        return{
            contentEditor:""
        }
    },
    mounted(){
        this.contentEditor = new Vditor("vditor",{
            height:360,
            toolbarConfig:{
                pin:true
            },
            cache:{
                enable:false
            },
            after:()=>{
                this.contentEditor.setValue("hello,Vditor+Vue!")
            }
        })
    },
    methods:{
    }
}
</script>

输入的正文可以使用

this.contentEditor.getValue() 得到

============================分割线============================

以上这是最简单的使用，下边加入图片文件等上传操作

图片.png

<script>
      mounted(){
      this.contentEditor = new Vditor("vditor",{
        height:450,
          width:800,
        placeholder:'此处为提示信息',
        toolbarConfig:{
          pin:true
        },
        cache:{
          enable:false
        },
      //这里写上传
        upload:{
          accept:'image/*',
          url:'http://127.0.0.1/question/fileupload',
          filename(name) {
            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g)
          },
          linkToImgCallback() {
            console.log("api处理")
          },
          success(editor, msg) {
            let responseData = JSON.parse(msg)
//此处后台返回一个上传保存的url地址，此时编辑器应该将该地址插入到文本中，，，
//本人能力有限，还没有研究出来，如果有大佬做出来希望可以教我一下
            console.log(responseData.url)
            return true
          },
          error(msg) {
            console.log(msg+"上传失败了")
          }
        }
      })
    }

</script>

后台部分

    @ResponseBody
    @RequestMapping(value = "/question/fileupload",method = RequestMethod.POST)
    public FileDTO uploadImg(HttpServletRequest request) throws IOException {
        MultipartRequest multipartRequest= (MultipartRequest) request;
        MultipartFile file = multipartRequest.getFile("file[]");
        String url=ossUploadImgProvider.UploadFile(file.getInputStream(),file.getContentType(),file.getOriginalFilename());
        FileDTO fileDTO = new FileDTO();
        fileDTO.setMessage("上传成功");
        fileDTO.setSuccess(1);
        fileDTO.setUrl(url);
        return fileDTO;
    }

============================分割线============================

内容渲染部分

tip：
编辑器在mounted()中初始化就渲染，此时axios还没有请求到需要渲染的数据，所以我这里是在mounted()中先渲染一点无关数据，待axios请求到数据之后，使用watch监听data中question的变化，再调用renderMarkdown()方法渲染新的数据。

<template>
      <div class="vditor-reset" id="vditorPreview"></div>
</template>
<script>
import Vditor from 'vditor'
import "vditor/dist/index.css"
export default {
  data(){
    return{
      contentEditor:"",
      question:{description:"loading..."},
    }
  },
  created() {
    this.getDetails()
  },
  mounted(){
    this.renderMarkdown(this.question.description)
  },
  methods:{
    async getDetails(){
         this.axios.get('/question/'+this.$route.params.id,{
        }).then(res => {
          if(res.data.code==1000){
            let datalist =res.data.extend
            this.question = datalist.question
            console.log("数据请求完成")
          }
        }).catch(error => {
         })
      },
    renderMarkdown(md) {
      console.log("开始渲染")
      Vditor.preview(document.getElementById('vditorPreview'),
          md
      )
    }
    },
  watch: {
    question(question) {
      console.log("监听到数据改变")
      this.renderMarkdown(question.description);
    }
  }
}
</script>